Need some help with js and html WordPress
Hi,
My website [[LINK href="http://www.lammworks.com"]]www.Lammworks.com[[/LINK]]’s Hero/header had a js called particles that makes that animation in the background.
There are 2 problems i would like to fix.
1)I can’t figure out how to get the block to work with the slider that is currently below it.As you can see the “ticker” that displays :IDEAS CREATIVAS, Agencia CREATIVA... is below the animation. instead of being on top of it.
2) i would like to change the animation parameters depending on the screen size. I am not familiar with Js but it would be the equivalent to @media (max-width: 762px) {{ }} in css.
<strong>For screens wider than 2048 use the following script</strong>
<script>
particlesJS('particles-js', {
particles: {
color: '#fff',
color_random: false,
shape: 'triangle', // "circle", "edge" or "triangle"
opacity: {
opacity: 1,
anim: {
enable: true,
speed: 3.5,
opacity_min: 0,
sync: true
}
},
size: 4,
size_random: true,
nb: 300,
line_linked: {
enable_auto: true,
distance: 200,
color: '#ffffff',
opacity: 1,
width: 1,
condensed_mode: {
enable: true,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 1.5
}
},
interactivity: {
enable: true,
mouse: {
distance: 550
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab', // "grab" of false
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
},
onresize: {
enable: true,
mode: 'out', // "out" or "bounce"
density_auto: false,
density_area: 100 // nb_particles = particles.nb * (canvas width * canvas height / 1000) / density_area
}
}
},
/* Retina Display Support */
retina_detect: true
});
</script>
<strong>For screens smaller than 2048 but bigger than 1280 use the following script:
</strong>
<script>
particlesJS('particles-js', {
particles: {
color: '#fff',
color_random: false,
shape: 'triangle', // "circle", "edge" or "triangle"
opacity: {
opacity: 1,
anim: {
enable: true,
speed: 3.5,
opacity_min: 0,
sync: true
}
},
size: 4,
size_random: true,
nb: 135,
line_linked: {
enable_auto: true,
distance: 200,
color: '#ffffff',
opacity: 1,
width: 1,
condensed_mode: {
enable: true,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 1.5
}
},
interactivity: {
enable: true,
mouse: {
distance: 350
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab', // "grab" of false
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
},
onresize: {
enable: true,
mode: 'out', // "out" or "bounce"
density_auto: false,
density_area: 100 // nb_particles = particles.nb * (canvas width * canvas height / 1000) / density_area
}
}
},
/* Retina Display Support */
retina_detect: true
});
</script>
<strong>For screens smaller than 1280 but bigger than 768 use the following script:</strong>
<script>
particlesJS('particles-js', {
particles: {
color: '#fff',
color_random: false,
shape: 'triangle', // "circle", "edge" or "triangle"
opacity: {
opacity: 1,
anim: {
enable: true,
speed: 3.5,
opacity_min: 0,
sync: true
}
},
size: 4,
size_random: true,
nb: 53,
line_linked: {
enable_auto: true,
distance: 200,
color: '#ffffff',
opacity: 1,
width: 1,
condensed_mode: {
enable: true,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 1.5
}
},
interactivity: {
enable: true,
mouse: {
distance: 250
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab', // "grab" of false
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
},
onresize: {
enable: true,
mode: 'out', // "out" or "bounce"
density_auto: false,
density_area: 100 // nb_particles = particles.nb * (canvas width * canvas height / 1000) / density_area
}
}
},
/* Retina Display Support */
retina_detect: true
});
</script>
<strong>Finally for screens smaller than 768 use the following script:</strong>
<script>
particlesJS('particles-js', {
particles: {
color: '#fff',
color_random: false,
shape: 'triangle', // "circle", "edge" or "triangle"
opacity: {
opacity: 1,
anim: {
enable: true,
speed: 2,
opacity_min: 0,
sync: true
}
},
size: 4,
size_random: true,
nb: 25,
line_linked: {
enable_auto: true,
distance: 50,
color: '#ffffff',
opacity: 1,
width: 1,
condensed_mode: {
enable: true,
rotateX: 600,
rotateY: 600
}
},
anim: {
enable: true,
speed: 1
}
},
interactivity: {
enable: true,
mouse: {
distance: 50
},
detect_on: 'canvas', // "canvas" or "window"
mode: 'grab', // "grab" of false
line_linked: {
opacity: .5
},
events: {
onclick: {
enable: true,
mode: 'push', // "push" or "remove"
nb: 4
},
onresize: {
enable: true,
mode: 'out', // "out" or "bounce"
density_auto: false,
density_area: 100 // nb_particles = particles.nb * (canvas width * canvas height / 1000) / density_area
}
}
},
/* Retina Display Support */
retina_detect: true
});
</script>
Attached is the .php file for that segment.
Answers (3)
Luis Abarca answers:
You can use the width of the viewport to run or load your scripts.
// load jQuery
if ( $(window).width() > 2048) {
// scripts
}
Ian Lincicome answers:
If I understand you correctly, for no.1, you'll need to edit both the HTML and the CSS. You want to put the div with the class of "ticker" right after the div with an id of "particles-js". That is, place it right after the particles-js div opens. Then edit the CSS for the ticker class to be something like:
.ticker{
position: relative;
top: 38px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 90px;
}
...you can edit as needed once it is in place of course.
For no. 2 you probably mean CSS not JS, Media queries are done in CSS. you can find a good explanation here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
If you require me to do it for you, give me access via wp-admin and I should be able to. (PM me)
Ian Lincicome comments:
oh, never mind, I see what you mean by the JS. I'm looking at that now.
dipka comments:
Hi,
For point #1 i would like something like this. [[LINK href="https://piff.ly/36608/5a78e427f3a22f9a0b38c678b328fdcc397516cb/Screenshot-2015-05-08%2014.30.jpg"]]https://piff.ly/36608/5a78e427f3a22f9a0b38c678b328fdcc397516cb/Screenshot-2015-05-08%2014.30.jpg[[/LINK]]
Ian Lincicome comments:
So.... it looks like you have the JS code for differnt width screens. All you have to add is the if statements I think. You chould simply do something like this:
<SCRIPT language="JavaScript">
<!--
if (screen.width>=2048){
//insert first block of code here...
}
if (screen.width<2048){
//insert second block of code here...
}
</SCRIPT>
...etc. Let me know if you need me to expand on that.
Ian Lincicome comments:
...then for point no. 1 you should just need to change the top css setting in my above example so it looks more like this:
.ticker{
position: relative;
top: 300px;
left: 50%;
margin-left: -350px;
width: 700px;
height: 90px;
}
play with the "top: 300" part until you get it positioned where you want horizontally.
dipka comments:
for point #1.
The css is not working.
It seems that the js creates the following lines in the html that is not pre programed in the .php file attached.
<canvas height="1280" width="2560" style="width: 100%; height: 100%;"></canvas>
This canvas then pushes the
<section style="background-position: 50% 639px; height: 1290px;" id="bienvenido" class="home-first-section hero parallax clearfix">
that includes the ticker below the js particle animation.
There another website that has something similar but its much more complex, as they split the js animations in 3 blocks to accommodate their logo (what would be the ticker) in the middle.
[[LINK href="http://www.nobly.com"]]http://www.nobly.com[[/LINK]]
Reigel Gallarde answers:
for point #1, use this css
#particles-js {
position: relative;
}
#particles-js .parallax {
position: absolute;
top: 0%;
right: 0;
bottom: 0;
left: 0;
margin: auto!important;
height: 172px!important;
z-index: 9999;
}
#particles-js .parallax .container {
margin-top: 0!important;
}
Reigel Gallarde comments:
here's a demo for javascript...
[[LINK href="http://codepen.io/anon/pen/bdEgxZ?editors=001"]]http://codepen.io/anon/pen/bdEgxZ?editors=001[[/LINK]]
I have included color change to verify that it changes the settings... you can just remove it after...
[[LINK href="http://codepen.io/anon/pen/bdEgxZ.js"]]here's the js code[[/LINK]]...
dipka comments:
Hi,
So you are getting close.
If i set the css and leave the old js then the background and the text align like the pic i uploaded. but if put your js then the whole section disappears.
dipka comments:
the css is also making the ticker overlap the menu whenever you drop down to a mobile screen 400px more or less
Reigel Gallarde comments:
change the z-index to 98 in my css code....
and please check if you have javascript errors in your console. errors will prevent javascript to run normally.