With the help of internet, I came up with something like this: http://codepen.io/birjolaxew/pen/yJYLyz
The author of this posts just fixed my syntax errors :);
But I came across another problem, how can I implement the setInterval here? so each second or so the radio is checked and the next image proceeds. I've googled a few videos about it but it didn't really aid me much. Perhaps seeing the code to my specific problem would help me in my understanding!
Code:
<!-- Images -->
<div class="fb featuredslider_container">
<div id="images">
<img src="https://s-media-cache-ak0.pinimg.com/736x/a4/11/3e/a4113ec2da852f2eaa65af72e96decb6.jpg" />
<img src="http://cdn.arstechnica.net/wp-content/uploads/2015/09/GooglePlus-logos-02-980x980.png" />
<img src="http://img05.deviantart.net/6b35/i/2013/015/7/9/the_white_dog_sophie_2_by_thecakemassacre-d5rko7g.jpg" />
</div>
<!-- Radio Sutff -->
<div class="featuredradiowrap">
<input checked class="featuredradio" id="featureditemslider1" name="itemslider" type="radio">
<label for="featureditemslider1"></label>
<input class="featuredradio" id="featureditemslider2" name="itemslider" type="radio">
<label for="featureditemslider2"></label>
<input class="featuredradio" id="featureditemslider3" name="itemslider" type="radio">
<label for="featureditemslider3"></label>
</div>
</div>
Css:
.featuredslider_container{
position: relative;
width: 500px;
height: 250px;
margin: 0 auto 32px;
overflow: initial; /* Change to overflow:hidden if you want to see the final product */
box-shadow: 0 0 0 2px #BFB198;
}
#images {
font-size: 0;
/*Remove white space */
width: 1500px;
height: 100%;
animation: move-images 8s infinite;
position: absolute;
left: 0;
top: 0;
}
#images img {
width: 500px;
height: 100%;
}
/* Radio Sutff */
input[type="radio"] {
display: none;
}
.featuredradiowrap {
position: absolute;
bottom: 0.8rem;
left: 50%;
transform: translateX(-50%);
}
.featuredradio + label:before {
content: "";
display: inline-block;
margin-right: 2px;
border-radius: 30px;
background: #00a0ff;
height: 17px;
width: 17px;
}
input[type="radio"]:checked + label:before {
background: orange;
}
Javascript
var featuredRadio = document.getElementsByClassName("featuredradiowrap")[0];
var images = document.getElementById("images");
function leftAnimation() {
if (document.getElementById("featureditemslider1").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "0";
} if (document.getElementById("featureditemslider2").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-500px";
}
if (document.getElementById("featureditemslider3").checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-1000px";
}
}
featuredRadio.addEventListener("click", leftAnimation);
Try this one. You are actually targeting the wrapper, not the inputs.
var featuredRadio = document.getElementsByClassName("featuredradio");
var images = document.getElementById("images");
function leftAnimation() {
if (featuredRadio[0].checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "0";
} else if (featuredRadio[1].checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-500px";
}
else if (featuredRadio[2].checked == true) {
images.style.transition = "left 2s linear 0s";
images.style.left = "-1000px";
}
}
featuredRadio.addEventListener("click", leftAnimation);
Related
I'm making a website with a 'like' function and if you click the like icon it should make div as a alert at the bottom of the website. The code that I wrote makes the div fade in and after a few seconds the pop up fades out. Then after the fade out the pop up just shows up again on the screen, but stuck this time. I'm learning Javascript so it is new to me so anything would be appreciated.
function myFunction() {
var test = document.querySelector('#color');
var x = document.createElement('div');
if(test.style.color == ""){
test.style.color = "red";
x.innerHTML ='Liked this tournament!';
x.id = "snackbar";
x.className = "show";
} else{
test.style.color = "";
x.innerHTML('Removed like from this tournament!');
x.id = "snackbar";
x.className = "show";
}
document.body.appendChild(x);
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 10%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
<li onclick="myFunction();"><i id="color" class="fas fa-heart"></i></li>
<li><i class="fas fa-plus"></i></li>
<li><i class="fas fa-expand"></i></li>
</ul>
I think it's maybe because of the document.body.appendChild(x); overwriting the css? I'm not sure what's happening..
A short video about the pop up: https://imgur.com/a/KfD7hNW
I'm not sure if you forgot to copy a portion of your CSS but you don't seem to have any actual animations. If you want those effects you can use the CSS that https://animate.style/ provides either by importing it or extracting it from their GitHub files if you just want the two animations. But if you're going to use the animation attribute, you need some kind of keyframe animation built out otherwise nothing is going to happen. The forwards value lets the animations play and then doesn't repeat them so it's not flashing after the user clicks the button.
Also, you had some broken JS but that was a simple mistake.
Worth reading: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations so you can see how all of the attributes can be animated and controlled
function myFunction() {
var test = document.querySelector('#color');
var x = document.createElement('div');
if(test.style.color == ""){
test.style.color = "red";
x.innerHTML ='Liked this tournament!';
x.id = "snackbar";
x.className = "show";
} else{
test.style.color = "";
x.innerHTML='Removed like from this tournament!'
x.id = "snackbar";
x.className = "show";
}
document.body.appendChild(x);
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 10%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 2.5s forwards;
}
#keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
.fadeIn {
animation-name: fadeIn;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
<li onclick="myFunction();">click me<i id="color" class="fas fa-heart"></i></li>
<li>not me<i class="fas fa-plus"></i></li>
<li>or me<i class="fas fa-expand"></i></li>
</ul>
In your approach every time that you click your icon you will create a new div element in the same place, which will create tons of div.. This is not efficient. So you can try something like this.
After adding show class to your div element you can set a timer which will wait for animation happens. Then remove that class with
myDiv.classList.remove('show');
const test = document.querySelector('#color');
const myDiv = document.createElement('div');
myDiv.id = "snackbar";
document.body.appendChild(myDiv);
test.addEventListener('click',() =>{
if(test.style.color == ""){
test.style.color = "red";
myDiv.innerText ='Liked this tournament!';
myDiv.className = "show";
setTimeout(() =>{
myDiv.classList.remove('show');
}, 2000);
}
else{
test.style.color = "";
myDiv.innerText = 'Removed like from this tournament!';
myDiv.className = "show";
setTimeout(() =>{
myDiv.classList.remove('show');
}, 2000);
}
})
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
display: grid;
place-content: center;
margin:0;
background-color: bisque;
font-size: 100px;
}
#snackbar {
visibility: hidden;
min-width: 250px;
margin-left: -125px;
background-color: #333;
color: #fff;
text-align: center;
border-radius: 2px;
padding: 16px;
position: fixed;
z-index: 1;
left: 10%;
bottom: 30px;
font-size: 17px;
}
#snackbar.show {
visibility: visible;
animation: fadeIn 0.5s, fadeOut 0.5s 1s forwards;
}
#keyframes fadeIn {
0%{
opacity:0;
}
100%{
opacity: 1;
}
}
#keyframes fadeOut {
0%{
opacity:1;
}
100%{
opacity: 0;
}
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<ul>
<li>click me<i id="color" class="fas fa-heart"></i></li>
<li>not me<i class="fas fa-plus"></i></li>
<li>or me<i class="fas fa-expand"></i></li>
</ul>
I'm trying to simulate the animation of flips of a coin with JS & CSS.
I guess the keys are transform-style, backface-visibility, rotateY, animation-fill-mode and transform in CSS as well as Math.random in JS.
If the coin is the heads, everything is OK.
If the coin is tail, clicking the button will flip it to head and then start the expected flipping animation.
How do I make it start flipping animation directly from the tail?
const coin = document.querySelector('#coin');
const button = document.querySelector('#flip');
const status = document.querySelector('#status');
const heads = document.querySelector('#headsCount');
const tails = document.querySelector('#tailsCount');
let headsCount = 0;
let tailsCount = 0;
function deferFn(callback, ms) {
setTimeout(callback, ms);
}
function processResult(result) {
if (result === 'heads') {
headsCount++;
heads.innerText = headsCount;
} else {
tailsCount++;
tails.innerText = tailsCount;
}
status.innerText = result.toUpperCase();
}
function flipCoin() {
coin.setAttribute('class', '');
const random = Math.random();
const result = random < 0.5 ? 'heads' : 'tails';
deferFn(function() {
coin.setAttribute('class', 'animate-' + result);
deferFn(processResult.bind(null, result), 2900);
}, 100);
}
button.addEventListener('click', flipCoin);
h2 {
margin: .25rem;
}
div.container {
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
button {
padding: 1rem;
background-color: skyblue;
}
#coin {
position: relative;
width: 15rem;
height: 15rem;
margin: 2rem 0rem;
transform-style: preserve-3d;
}
#coin div {
width: 100%;
height: 100%;
border: 2px solid black;
border-radius: 50%;
backface-visibility: hidden;
background-size: contain;
position: absolute;
}
.heads {
background-image: url("https://en.numista.com/catalogue/photos/inde/2311-original.jpg");
}
.animate-heads {
animation: flipHeads 3s;
animation-fill-mode: forwards;
}
#keyframes flipHeads {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1800deg);
}
}
.tails {
background-image: url("https://en.numista.com/catalogue/photos/inde/3165-original.jpg");
transform: rotateY(-180deg);
}
.animate-tails {
animation: flipTails 3s;
animation-fill-mode: forwards;
}
#keyframes flipTails {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1620deg);
}
}
<div class='container'>
<h2>Confused about your life decision? Just flip this coin!</h2>
<h2>Btw, don't forget to assign something to both sides.</h2>
<p>And don't take your life decision based on this stupid coin flip. I was kidding.</p>
<div id="coin" class=''>
<div id="heads" class="heads"></div>
<div id="tails" class="tails"></div>
</div>
<button id="flip">Flip this thing</button>
<p>Heads: <span id="headsCount">0</span> Tails: <span id="tailsCount">0</span></p>
<p><span id="status"></span></p>
</div>
You can use the css property:
animation-fill-mode: forwards;
I am using JavaScript to toggle notification like below.
How can I add transition between display: block and display: none;
I don't want to add an external library like jQuery because I am only going to be using the toggle effect alone.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.display == 'none'){
hint.style.display = 'block';
}
else{
hint.style.display = 'none';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I know I can use jQuery to achieve this like below.
$(document).ready(function(){
$('button').click(function(){
$('#hint').toggle('slow');
});
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
Can I make the button moves up and down gradually while the #hint is being toggle like in the jQuery example above? I don't want the button to jump from one position to another.
#vothaison's suggestion: CSS transitions
Technically, #vothaison wanted to use setInterval as opposed to setTimeout, but I don't see the need for that. It's just more work.
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 1;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
hint.style.display = 'block';
window.setTimeout(function(){
hint.style.opacity = 1;
hint.style.transform = 'scale(1)';
},0);
}
if (hint.className === 'hide') {
hint.style.opacity = 0;
hint.style.transform = 'scale(0)';
window.setTimeout(function(){
hint.style.display = 'none';
},700); // timed to match animation-duration
}
});
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
transform: scale(0);
transition: .6s ease opacity,.6s ease transform;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Using CSS animations
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
setTimeout(function(){
hint.style.display = 'block';
},0); // timed to occur immediately
}
if (hint.className === 'hide') {
setTimeout(function(){
hint.style.display = 'none';
},700); // timed to match animation-duration
}
});
#-webkit-keyframes in {
0% { -webkit-transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden; }
100% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
#keyframes in {
0% { transform: scale(0) rotate(12deg); opacity: 0; visibility: hidden; }
100% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
}
#-webkit-keyframes out {
0% { -webkit-transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { -webkit-transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
#keyframes out {
0% { transform: scale(1) rotate(0); opacity: 1; visibility: visible; }
100% { transform: scale(0) rotate(-12deg); opacity: 0; visibility: hidden; }
}
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
}
#hint.show {
-webkit-animation: in 700ms ease both;
animation: in 700ms ease both;
}
#hint.hide {
-webkit-animation: out 700ms ease both;
animation: out 700ms ease both;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Using vanilla JavaScript
There are many, many ways to do this sort of thing with vanilla JavaScript, so here's a quick sketch of one way:
// you may need to polyfill requestAnimationFrame
var hint = document.getElementById('hint');
var btn = document.getElementById('btn_show');
btn.addEventListener('click', function(){
var ctr = 0;
hint.className = hint.className !== 'show' ? 'show' : 'hide';
if (hint.className === 'show') {
window.setTimeout(function(){
hint.style.display = 'block';
fadein();
},0); // do this asap
}
if (hint.className === 'hide') {
fadeout();
window.setTimeout(function(){
hint.style.display = 'none';
},700); // time this to fit the animation
}
function fadein(){
hint.style.opacity = ctr !== 10 ? '0.'+ctr : 1;
hint.style.transform = ctr !== 10 ? 'scale('+('0.'+ctr)+')' : 'scale(1)';
ctr++;
if (ctr < 11)
requestAnimationFrame(fadein);
else
ctr = 0;
}
function fadeout(){
hint.style.opacity = 1 - ('0.'+ctr);
hint.style.transform = 'scale('+(1 - ('0.'+ctr))+')';
ctr++;
if (ctr < 10)
requestAnimationFrame(fadeout);
else
ctr = 0;
}
});
#hint {
background: yellow;
color: red;
padding: 16px;
margin-bottom: 10px;
opacity: 0;
}
<div id="hint" style="display: none;">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button id="btn_show"> Show hint </button>
Say what you want about GreenSock, Velocity.js, jQuery, etc — they all trivialise this process of showing and hiding of things. Why not just borrow the show and hide functions from jQuery's source code?
see my example below:
var btn = document.querySelector('button');
var hint = document.getElementById('hint');
var height = hint.clientHeight;
var width = hint.clientWidth;
console.log(width + 'x' + height);
// initialize them (within hint.style)
hint.style.height = height + 'px';
hint.style.width = width + 'px';
btn.addEventListener('click', function(){
if(hint.style.visibility == 'hidden'){
hint.style.visibility = 'visible';
//hint.style.opacity = '1';
hint.style.height = height + 'px';
hint.style.width = width + 'px';
hint.style.padding = '.5em';
}
else{
hint.style.visibility = 'hidden';
//hint.style.opacity = '0';
hint.style.height = '0';
hint.style.width = '0';
hint.style.padding = '0';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
box-sizing: border-box;
overflow: hidden;
font-weight: bold;
transition: height 1s, width 1s, padding 1s, visibility 1s, opacity 0.5s ease-out;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
Hi I dont use display: block to display:none but changing the opacity, height and padding instead
please review this one:
var btn = document.querySelector('button');
btn.addEventListener('click', function() {
var hint = document.getElementById('hint');
if (hint.classList.contains('h-hide')) {
hint.classList.remove('h-hide');
} else {
hint.classList.add('h-hide');
}
});
div#hint {
display: block;
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
transition: .5s all linear;
opacity: 1;
overflow: hidden;
height: 100px;
}
#hint.h-hide {
padding: 0;
opacity: .25;
height: 0;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community</p>
<p>This is another hint on how to be safe in this community</p>
</div>
<button>show hint</button>
the drawback for this approach is we have to keep tract of the div#hint height and change it using javascript if needed.
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
if(hint.style.visibility == 'hidden'){
hint.style.visibility = 'visible';
hint.style.opacity = '1';
}
else{
hint.style.visibility = 'hidden';
hint.style.opacity = '0';
}
});
div#hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
transition: visibility 1s, opacity 0.5s linear;
}
<div id='hint'>
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I think using visibility over display is better option
Without using css3 transition, you can use js setInterval to change some css property of the div, such as:
Change opacity from 0 to 1
Change height from 0 to full height
Change width from 0 to full width
Initially, you should have display: none; opacity: 0; height: 0; width: 0'
Then you have to change display: none to display: block; before you use setInterval to change other properties.
(I guess you know how to hide the div)
You can also use setTimeout(), with a trick of recursive.
Try something like this:
var btn = document.querySelector('button');
btn.addEventListener('click', function(){
var hint = document.getElementById('hint');
hint.classList.toggle("hide");
});
.hint{
background: gold;
color: orangered;
padding: .5em;
font-weight: bold;
visibility: visible;
opacity: 1;
max-height: 500px;
transition: visibility 0s, opacity 0.3s, max-height 0.6s linear;
}
.hide {
visibility: hidden;
opacity: 0;
max-height: 0px;
transition: max-height 0.3s, opacity 0.3s, visibility 0.3s linear;
}
<div id='hint' class="hint">
<p>This is some hint on how to be safe in this community </p>
<p>This is another hint on how to be safe in this community </p>
</div>
<button> show hint </button>
I have also tried to do this
please have a look if it can help you
var btn = document.querySelector('button');
var hint = document.getElementById('hint');
hint.style.opacity = 1;
hint.style.transition = "opacity 1s";
btn.addEventListener('click', function(){
if(hint.style.opacity == 0 || hint.style.opacity==''){
hint.style.opacity = 1;
}
else{
hint.style.opacity = 0;
}
});
let redBox = document.getElementById('redBox');
let blueBox = document.getElementById('blueBox');
let [redButton, blueButton] = document.querySelectorAll('button'); //Destructuring
redButton.addEventListener('click', () => {
smoothDisplayNone(redBox);
});
blueButton.addEventListener('click', () => {
smoothDisplayNone(blueBox);
});
//By using smoothDisplayNone() function, you can add this effect to whatever element you want.
function smoothDisplayNone(selectedElement){
if(!selectedElement.classList.contains('animationDisplayNone')){
selectedElement.classList.add('animationDisplayNone');
selectedElement.classList.remove('animationDisplayBlock');
}
else{
selectedElement.classList.remove('animationDisplayNone');
selectedElement.classList.add('animationDisplayBlock');
}
}
#redBox{
width: 200px;
height: 200px;
background-color: red;
}
#blueBox{
width: 200px;
height: 200px;
background-color: blue;
}
.animationDisplayNone{
animation: smoothDisplayNone 0.5s linear forwards;
}
.animationDisplayBlock{
animation: smoothDisplayBlock 0.5s linear forwards;
}
/*You should set the width and height according to the size of your element*/
#keyframes smoothDisplayBlock{
0% { opacity: 0; width: 0px; height: 0px; }
25% { opacity: 0.25; }
50% { opacity: 0.50; }
75% { opacity: 0.75; }
100% { opacity: 1; width: 200px; height: 200px; }
}
#keyframes smoothDisplayNone {
0% { opacity: 1; width: 200px; height: 200px; }
25% { opacity: 0.75; }
50% { opacity: 0.50; }
75% { opacity: 0.25; }
100% { opacity: 0; width: 0px; height: 0px; }
}
<div id="redBox"></div>
<div id="blueBox"></div>
<button type="button" style="margin-top:10px;">Red</button>
<button type="button" style="margin-top:10px;">Blue</button>
The code looks long at first glance but it is actually very simple to understand. I used the power of css animation to create a smooth effect.
You can use smoothDisplayNone() function easily.
One more time I need your help. I've used star wars intro and to display it I created buttons. It is played in popup div, but the footer makes height of container too big in for me so I want to remove this element when the code of star wars is displayed.
//start music
function play(){
var audio = document.getElementById("audio");
audio.play();
}
//stop music
function stop(){
var audio = document.getElementById("audio");
audio.pause();
audio.currentTime = 0;
}
//sekwenscja star wars
var sWidth; //screen width
var sHeight; //screen height
var canvas;
var context;
var numOfStars;
var starDensity = 1800; //lower == more stars
var starColors = ["#111", "#333", "#555", "#7872a8", "#483f26"];
var audio = $('audio').get(0);
$(document).ready(function() {
//Play the theme song
setTimeout(function() {
audio.play();
}, 7600);
//Get the window size
sWidth = $(window).width();
sHeight = $(window).height();
//Get the canvas
canvas = $('#starfield');
//Fill out the canvas
canvas.attr('height', sHeight);
canvas.attr('width', sWidth);
context = canvas[0].getContext('2d');
//Calculate the number of stars
numOfStars = Math.floor((sWidth * sHeight) / starDensity);
console.log(numOfStars);
//Draw the stars
function stars() {
for (i=0;i<numOfStars;i++) {
//Get a random star color
var starColor = starColors[Math.floor(Math.random()*5)];
//Get a random x-position
var starX = Math.floor(Math.random()*sWidth);
//Get a random y-position
var starY = Math.floor(Math.random()*sHeight);
//Draw
context.beginPath();
context.arc(starX, starY, 1, 0, 2 * Math.PI);
context.fillStyle = starColor;
context.fill();
}
}
//Draw the stars
stars();
});
.white_content {
display: none;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: black;
z-index:1002;
overflow: auto;
}
div#glowne {
position: relative;
width: 100%;
max-width: 1920px;
height: 100%;
max-height: 1080px;
font-family: 'Open Sans';
overflow: hidden;
}
#media screen and (min-width: 1600px) {
body {
margin: 0 auto;
}
}
/* In case of no audio support */
audio {
position: absolute;
top: 0;
left: 0;
color: white;
font-size: 14px;
font-weight: 700;
}
#starfield {
z-index: 1;
opacity: 0;
position: absolute;
animation: starfield 0s 8s forwards;
}
#keyframes starfield {
to { opacity: 1; }
}
.long-time {
z-index: 2;
opacity: 0;
position: absolute;
color: #00d7ff;
top: 50%;
left: 51%;
width: 65%;
transform: translate3d(-50%,-50%,0);
font-size: 30px;
font-size: 4.5vw;
line-height: 1.5em;
animation: long-time 5s 1s forwards;
}
#media screen and (min-width: 1600px) {
.long-time {
font-size: 5.0em;
}
}
#keyframes long-time {
0% { opacity: 0; }
18% { opacity: 1; }
82% { opacity: 1; }
100% { opacity: 0; }
}
.logo {
opacity: 0;
z-index: 3;
position: absolute;
width: 100%;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
animation: logo 10s 8s cubic-bezier(0,.1,.2,1); forwards;
}
#keyframes logo {
0% { opacity: 1; }
98% { opacity: 1; }
100% { width: 40px;
opacity: 0; }
}
.crawl-container {
z-index: 2;
position: absolute;
bottom: 0;
width: 100%;
height: 350vh;
max-height: 3000px;
/**/color: #ffe029;
/**/text-align: justify;
/**/overflow: hidden;
/**/transform-origin: 50% 100%;/**/
/**/transform: perspective(200px) rotateX(16deg);
/**/animation: crawl-container 0s 17s forwards;
}
#keyframes crawl-container {
to { opacity: 1; }
}
.crawl-container .crawl {
z-index: 2;
position: absolute;
top: 100%; /*skąd zaczyna przewijany tekst historii wypływać*/
width: 100%;
animation: crawl 170s 17s linear forwards;
}
.crawl p {
margin-left: auto;
margin-right: auto;
padding: 0 10%;
max-width: 1500px;
}
.crawl p.title {
font-size: 3em;
font-size: 5vw;
text-align: center;
}
.crawl p.title-1 {
margin-bottom: .7em;
}
.crawl p.title-2 {
margin-bottom: 1.2em;
}
.crawl p.title-2 img {
width: 65%;
height: auto;
}
p.crawl-p {
text-align: justify;
font-size: 5.6vw;
margin-bottom: 1.2em;
}
#media screen and (min-width: 1600px) {
p.crawl-p {
font-size: 5.0em;
}
}
#keyframes crawl {
to { top: -250%; }
}
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><input type="button" value="WEJDŹ" onclick="play()">
<audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg"></audio></a>
<div id="light" class="white_content">
<div id="glowne">
<audio preload="auto">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.ogg" type="audio/ogg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/sw-7-theme.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<canvas id="starfield"></canvas>
<div class="long-time">A long time ago in a galaxy far,<br />far away....</div>
<img class="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/star-wars-7-logo.png" />
<div class="crawl-container">
<div class="crawl">
<p class="title title-1">Episode VII</p>
<p class="title title-2"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331813/the-force-awakens.png"></p>
<p class="crawl-p">Luke Skywalker has vanished. In his absence, the sinister FIRST ORDER has risen from the ashes of the Empire and will not rest until Skywalker, the last Jedi, has been destroyed.</p>
<p class="crawl-p">With the support of the REPUBLIC, General Leia Organa leads a brave RESISTANCE. She is desperate to find her brother Luke and gain his help in restoring peace and justice to the galaxy.</p>
<p class="crawl-p">Leia has sent her most daring pilot on a secret mission to Jakku, where an old ally has discovered a clue to Luke's whereabouts....</p>
</div>
</div></div><input type="button" value="ZAKOŃCZ" onclick="stop()"></div>
<div id="fade" class="black_overlay"></div>
<?php
// Start the loop.
while ( have_posts() ) : the_post();
// Include the page content template.
get_template_part( 'template-parts/content', 'page' );
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
// End of the loop.
endwhile;
?>
</main><!-- .site-main -->
<?php get_sidebar( 'content-bottom' ); ?>
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Use this to hide the footer
document.getElementById('footerID').style.display='none';
Without knowing the HTML for your footer it is impossible to be exact, but you can simply hide it within the ready function:
$( /* unique selector for your footer */ ).hide();
I'd probably put this at the start of the ready function, but looking at your code the specific place you call should be pretty irrelevant.
P.S.
You could also call $( /* ...footer */ ).remove();, but hiding it will allow you to show it again should the need arise.
so I have some images and I would like to show them as a slideshow in the background. However, I want the image to cross-fade between the current image and the next image. So far, I have only been able to switch between the images:
$(document).ready(function () {
var images = ["landing_background_1.jpg", "landing_background_2.jpg", "landing_background_3.jpg", "landing_background_4.jpg"];
var currentImage = 0;
function changeBackgroundImage() {
$("html").fadeIn().css({
"background-image": "url('img/backgrounds/" + images[++currentImage] + "')",
});
if (currentImage >= images.length - 1) {
//set it back to the begining
currentImage -= images.length;
}
}
setInterval(changeBackgroundImage, 1500);
});
Any help would be much appreciated! :)
What you have to do is layer two element on top of each other. Then have one fadeout and the other fadein.
Here is how I would go about doing it ...
css ...
#background-images {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
#bImg1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 3;
background: url(starting-img1.jpg) no-repeat;
background-size: contain;
}
#bImg2 {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url(starting-img2.jpg) no-repeat;
background-size: contain;
}
.container {
width: 960px;
height: 900px;
background: rgba(255,255,255,.7);
margin: auto;
position: relative;
z-index: 10;
}
The html ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body>
<div id="background-images">
<div id="bImg1"></div>
<div id="bImg2"></div>
</div>
<div class="container">
Content Here
</div>
</body>
</html>
The script ...
var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageSet1 = 0;
var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"];
var currentImageSet2 = 0;
function changeBackgroundImages() {
img1Fade();
setTimeout(img2Fade, 2000);
}
function img1Fade(){
$('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
$('#bImg2').fadeIn('slow');
if (currentImageSet1 >= imageSet1.length - 1) {
currentImageSet1 -= imageSet1.length;
};
}
function img2Fade(){
$('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
$('#bImg1').fadeIn('slow');
if (currentImageSet2 >= imageSet2.length - 1) {
currentImageSet2 -= imageSet2.length;
};
}
$(document).ready(function(){
setInterval(changeBackgroundImages, 5000);
});
You will need to mess with the timing to get it to look good. Make sure to set your urls to the images in the image array or when the sting in the css is built.
I've spent a lot of time to find the most clean and easy way.
This finally works:
var i=0;
var imghead=[
"url(http://yoururl.com/picture0.jpg)",
"url(http://yoururl.com/picture1.jpg)"
];//add as many images as you like
function slideimg() {
setTimeout(function () {
jQuery('#element').css('background-image', imghead[i]);
i++;
if(i==imghead.length) i=0;
slideimg();
}, 6000);
}
slideimg();
#element{
height: 100%;
overflow: hidden;
opacity: 1.0;
-webkit-transition: background-image 1.5s linear;
-moz-transition: background-image 1.5s linear;
-o-transition: background-image 1.5s linear;
-ms-transition: background-image 1.5s linear;
transition: background-image 1.5s linear;
}
Easier:
var current = 1;
function anim() {
if(current == 4) {current = 1; }
$('#bImg'+ current).fadeOut(3000);
++current;
$('#bImg'+ current).fadeIn(3000);
setTimeout(anim, 8000);
}
anim();
html:
<div class="inside" >
<div id="bImg2"></div>
<div id="bImg3"></div>
</div>
css:
.inside {
background:url(top_01.jpg) no-repeat center top ;
}
#bImg2 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_02.jpg) no-repeat center top ;
display: none;
}
#bImg3 {
position: absolute;
top: 0px;
width: 100%;
background:url(top_03.jpg) no-repeat center top ;
display: none;
}