I'm pretty new to coding and everything but have gained a pretty good understanding of everything from tutorials and all that stuff.
I'm trying to make this logo change when someone scrolls down. It is working, but i'm trying to figure out why it quickly toggles the classes at the very beginning when the page first loads and someone scrolls down. It only does it at the beginning, but after that it works fine.
Any tips or advice?? Thank you!!
window.onscroll = function() {
navScroll()
};
function navScroll() {
var logoNav = document.getElementById("bgNav");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
logoNav.className = "play";
} else {
logoNav.className = "playBack";
}
}
#charset "UTF-8";
.container {
height: 2000px;
background-color: #c3c3c3;
}
#keyframes play60 {
0% {
background-position: 0 0;
}
100% {
background-position: -30000px 0px;
}
}
#keyframes play60Back {
0% {
background-position: -30000px 0px;
}
100% {
background-position: 0 0;
}
}
#bgNav.play {
animation-name: play60;
animation-fill-mode: forwards;
}
#bgNav.playBack {
animation-name: play60Back;
animation-fill-mode: forwards;
}
#bgNav {
height: 117px;
width: 500px;
position: fixed;
animation-duration: 2000ms;
animation-timing-function: steps(60);
background-repeat: no-repeat;
background-image: url("https://metro1.000webhostapp.com/metro-nav-animated.svg");
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="" id="bgNav"></div>
</div>
</body>
</html>
This works fine
} else if(logoNav.className === "play") {
logoNav.className = "playBack";
}
window.onscroll = function() {
navScroll()
};
function navScroll() {
var logoNav = document.getElementById("bgNav");
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
logoNav.className = "play";
} else if(logoNav.className === "play") {
logoNav.className = "playBack";
}
}
#charset "UTF-8";
.container {
height: 2000px;
background-color: #c3c3c3;
}
#keyframes play60 {
0% {
background-position: 0 0;
}
100% {
background-position: -30000px 0px;
}
}
#keyframes play60Back {
0% {
background-position: -30000px 0px;
}
100% {
background-position: 0 0;
}
}
#bgNav.play {
animation-name: play60;
animation-fill-mode: forwards;
}
#bgNav.playBack {
animation-name: play60Back;
animation-fill-mode: forwards;
}
#bgNav {
height: 117px;
width: 500px;
position: fixed;
animation-duration: 2000ms;
animation-timing-function: steps(60);
background-repeat: no-repeat;
background-image: url("https://metro1.000webhostapp.com/metro-nav-animated.svg");
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="" id="bgNav"></div>
</div>
</body>
</html>
Related
If I try this code I just wrote:
function changeBackgroundColor() {
const clickingDiv = document.getElementById("test");
clickingDiv.style.setProperty("--primary-color-new", "#3474A7");
clickingDiv.style.setProperty("--secondary-color-new", "#ffd340");
clickingDiv.style.animation = "change-background 1s";
clickingDiv.classList.add("change-bg");
setTimeout(() => {
clickingDiv.style.setProperty("--primary-color", "#3474A7");
clickingDiv.style.setProperty("--secondary-color", "#ffd340");
clickingDiv.style.animation = "";
clickingDiv.classList.remove("change-bg");
}, 1000);
}
#keyframes change-background {
from {
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
}
to {
background: linear-gradient(to right, var(--primary-color-new), var(--secondary-color-new));
}
}
#test {
width: 500px;
height: 500px;
}
.change-bg {
animation-name: change-background;
animation-duration: 1s;
animation-iteration-count: 1;
animation-fill-mode: both;
animation-timing-function: ease;
}
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
<button onclick="changeBackgroundColor()">click me</button>
</div>
the animation don't work and it directly switch from the first color to the other. (Normally I retrieve the color from an API)
I would want to do a transition between the 2 values
I found out that linear-gradient transition / animation doesn't work. To fix this error I just used a wrapper with the opacity like this so here's the modified code:
function changeBackgroundColor() {
const wrapper = document.getElementById("wrapper");
const element = document.getElementById("test");
if (!wrapper.classList.contains("wrapper-moving")) {
wrapper.classList.add("wrapper-moving");
wrapper.style.setProperty("--new-primary-color", "#2568f6");
wrapper.style.setProperty("--new-secondary-color", "#804cda");
setTimeout(() => {
element.style.setProperty("--primary-color", "#2568f6");
element.style.setProperty("--secondary-color", "#804cda");
wrapper.classList.remove("wrapper-moving");
}, 1000);
}
}
#test {
width: 500px;
height: 500px;
background: linear-gradient(to right, #3474A7, #ffd340);
z-index: 1;
}
.wrapper {
z-index:-1;
height: 600px;
width: 600px;
position: absolute;
transition: all 1s;
background: linear-gradient(to right, var(--new-primary-color), var(--new-secondary-color));
}
.wrapper:not(.wrapper.wrapper-moving) {
opacity: 0;
}
.wrapper.wrapper-moving {
opacity: 1;
}
<div id="test" style="--primary-color: #2568f6; --secondary-color: #804cda;">
<div id="wrapper" class="wrapper"></div>
<button onclick="changeBackgroundColor()">click me</button>
</div>
(I couldn't get it to work properly in my case but it is the answer)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Document</title>
<link href="index.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div class="slideshow-container">
<div class="mySlideDiv fade active">
<img src="bg.jpg">
</div>
<div class="mySlideDiv fade">
<img src="lemon.jpg">
</div>
<div class="mySlideDiv fade">
<img src="pear.webp">
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
</body>
</html>
body{
margin: 0;
}
/* Slideshow container */
.slideshow-container {
/*max-width: 1440px;*/
position: relative;
margin: auto;
margin-left: 0%;
margin-top: 0%;
}
/* effect */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
#-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
#keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 45%;
width: auto;
padding: 16px;
margin-top: -22px;
color: red;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0%;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
img{
width:100%;
height: 30%important;
}
$(document).ready(function () {
$(".mySlideDiv").not(".active").hide();
setInterval(nextSlide, 4000);
});
function prevSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex <= 0) {
newIndex = allSlide.length-1;
} else {
newIndex = currentIndex-1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
function nextSlide() {
$(".mySlideDiv").hide();
var allSlide = $(".mySlideDiv");
var currentIndex = 0;
$(".mySlideDiv").each(function(index,item){
if($(this).hasClass("active")) {
currentIndex = index;
}
});
var newIndex = 0;
if(currentIndex >= allSlide.length-1) {
newIndex = 0;
} else {
newIndex = currentIndex+1;
}
$(".mySlideDiv").removeClass("active");
$(".mySlideDiv").eq(newIndex).addClass("active");
$(".mySlideDiv").eq(newIndex).show();
}
Screenshot on mobile
I want to make a responsive web application, but mobile window isn't filled with the image, and I don't know how to edit the code to make it. I assume that I have to embed the code targeted with mobile web, but I don't know how to do. I attach the image file to explain my situation. Please help.
You can try to put in the css of your container:
width:100%;
height: 100%;
And in the css of your pictures :
width:100%;
height: undefined;
// figure out your image aspect ratio
aspectRatio: 50 / 32;
Add css with media query
#media(max-width:480px) {
img {
width:100% !important;
height: 100% !important;
object-fit: cover; }
}
I got myself a simple script that creates a progressbar which runs for 180 seconds. After that time the progressbar sends the browser to another website. View / run the code below.
I added an onclick event to the progress bar for testing purposes.
What I want; I want to be able to pause, reset and set a new running-time value.
I tried using document.getElementById('progressbar1').style.animationPlayState = 'paused'; to pause the progressbar, but unfortunately nothing is happening.
Do you guys have any clue on how to pause the progressbar?
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>
You are selecting the wrong element to stop the animation!
The animation is running on #progressbar1 .inner
function createProgressbar(id, duration, callback) {
var progressbar = document.getElementById(id);
progressbar.className = 'progressbar';
var progressbarinner = document.createElement('div');
progressbarinner.className = 'inner';
progressbarinner.style.animationDuration = duration;
if (typeof(callback) === 'function') {
progressbarinner.addEventListener('animationend', callback);
}
progressbar.appendChild(progressbarinner);
progressbarinner.style.animationPlayState = 'running';
}
addEventListener('load', function() {
createProgressbar('progressbar1', '180s', function() {
window.location.replace("gotomypage.html");
});
document.getElementById('progressbar1').addEventListener("click", function() {
console.log ('TEST - Stop Progressbar');
document.getElementById('progressbar1').getElementsByClassName('inner')[0].style.animationPlayState = 'paused';
});
});
.progressbar {
width: 500px;
margin: 25px auto;
border: solid 1px #000;
position: absolute;
right:25%;
left:50%;
margin-left:-250px;
}
.progressbar .inner {
height: 15px;
animation: progressbar-countdown;
animation-duration: 40s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-play-state: paused;
animation-timing-function: linear;
}
#keyframes progressbar-countdown {
0% {
width: 100%;
background: #0F0;
}
100% {
width: 0%;
background: #F00;
}
}
<div id="progressbar1"></div>
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 want to make my animation runs every 5sec using js
this is my html code
<div id="aa"></div>
and this is my css code
#aa{
width: 167px;
height: 169px;
background-image: url("sprite.png");
/*animation: play .2s steps(6) ;*/
}
#keyframes play {
from { background-position: 0px; }
to { background-position: -1002px; }
}
jsfiddle
You can play animation in class, then add and remove class of element every 5 second.
setInterval(function(){
$("div").addClass("play");
setTimeout(function(){
$("div").removeClass("play");
}, 1000);
}, 5000);
div {
width: 100px;
height: 100px;
background: green;
}
.play {
animation: play 1s;
}
#keyframes play {
0% { margin-left: 0px; }
50% { margin-left: 200px; }
100% { margin-left: 0px; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
It will look like:
function animation()
{
$('#overlay').fadeIn('slow').delay(1000).fadeOut('slow');
}
setInterval(animation,5000);
I made a sample for you, have a look: http://jsfiddle.net/xgnjy8st/
Does this suite you?
<div id="aa"></div>
#aa {
width: 167px;
height: 169px;
background-image: url("http://www.w3schools.com/cssref/pineapple.jpg");
animation: blinker 5s forwards infinite;
}
#keyframes blinker {
50% {
opacity: 0.0;
}
}
https://jsfiddle.net/65t0ye2m/
Or try this one out with js
var img = document.getElementById('aa');
var interval = window.setInterval(function() {
if (img.style.visibility == 'visible') {
img.style.visibility = 'hidden';
} else {
img.style.visibility = 'visible';
}
}, 1000);
https://jsfiddle.net/65t0ye2m/