I have a simple script which works as a simple html gallery. However, I need to add some transition effects to my gallery, something like fade in, fade out, or the effect of something similar to the subtitles at the end of every movie (you know what I mean).
How can I solve this? I would like to make it using only JS, HTML, CSS, without external plugins. Is it possible? For now on, I have only something like this below:
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
</head>
<body>
<div align="center">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
I just created a JQuery function and added it to your script. Now when you click on that button it will do as it says. It is just as an example how to do that
<html>
<head>
<title>Test</title>
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
i+=3;
},5000);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".btn1").click(function(){
$("#link1").fadeOut()
});
$(".btn2").click(function(){
$("#link1").fadeIn();
});
});
</script>
</head>
<body>
</script>
</head>
<body>
<div align="center">
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' > </br></br>
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3' > </br>
</div>
</body>
</html>
You can definitely achieve some effects with CSS. But not all (like jQuery-ui's blind)
most effects consist of changing:
opacity: [0-1]
display: relative; left: [X]px; top: [Y]px or transform: translate([X]px,[Y]px)
overflow: hidden
and an animation:
either CSS:
#img {
animation: fade-in 2s infinite;
}
#keyframe fade-in {
from {
left: -200px
}
to {
left: 0
}
}`
or JavaScript:
var img = document.getElementById('img');
for(i = 1; i <= 100; i++){
(function(step) {
setTimeout(function() {
img.style.transform = "translate(-"+(200-step*2)+"px, 0)";
}, step * 20);
})(i);
}
to achieve something like blind, you must move an image-container <div> left, while moving the image right at the same speed.
Here's a simplified blind effect example
https://jsfiddle.net/warkentien2/Lh10phuv/5/
Here I've implemented 8 pure JavaScript effects (including blind, with instructions)
- fade in
http://codepen.io/warkentien2/pen/pboVXR
- fade out
http://codepen.io/warkentien2/pen/EyxpVq
You can try this one. I have not changed your code at all.
HTML
<div align="center">
<a href="http://www.example1.com" id="link1">
<img src="https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png" id='img1' >
</a>
</br>
</br>
<a href="http://www.example2.com" id="link2">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg" id='img2' >
</a>
<br>
<br>
<a href="http://www.example3.com" id="link3">
<img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png" id='img3'>
</a>
<br>
</div>
Css
<style>
.animate{transition:all 1s ease; opacity:0;}
</style>
Js
<script>
var images = [ "https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png",
"https://upload.wikimedia.org/wikipedia/commons/a/a9/Example.jpg",
"https://upload.wikimedia.org/wikipedia/commons/c/ce/Example_image.png",
"https://upload.wikimedia.org/wikipedia/commons/e/ee/Example-zh.jpg",
"https://upload.wikimedia.org/wikipedia/commons/e/e2/P%C5%99%C3%ADklad.jpg",
"https://upload.wikimedia.org/wikipedia/commons/d/d6/Beispiel.png"
];
var links = [ "http://www.example1.com",
"http://www.example2.com",
"http://www.example3.com",
"http://www.example4.com",
"http://www.example5.com",
"http://www.example6.com",
];
var i = 0;
var renew = setInterval(function(){
if(i==images.length) i=0;
document.getElementById("img1").src = images[i];
document.getElementById("link1").href = links[i];
document.getElementById('link1').style.opacity = 0;
setTimeout(function(){
document.getElementById('link1').setAttribute("class", "animate");
document.getElementsByClassName('animate')[0].style.opacity = 1;
setTimeout(function(){document.getElementById('link1').removeAttribute("class", "animate")},500)
},500)
if(i+1==images.length) i=-1;
document.getElementById("img2").src = images[i+1];
document.getElementById("link2").href = links[i+1];
document.getElementById('link2').style.opacity = 0;
setTimeout(function(){
document.getElementById('link2').setAttribute("class", "animate");
document.getElementsByClassName('animate')[1].style.opacity = 1;
setTimeout(function(){document.getElementById('link2').removeAttribute("class", "animate")},500)
},500)
if(i+2==images.length) i=-2;
document.getElementById("img3").src = images[i+2];
document.getElementById("link3").href = links[i+2];
document.getElementById('link3').style.opacity = 0;
setTimeout(function(){
document.getElementById('link3').setAttribute("class", "animate");
document.getElementsByClassName('animate')[2].style.opacity = 1;
setTimeout(function(){document.getElementById('link3').removeAttribute("class", "animate")},500)
},500)
i+=3;
},5000);
</script>
Check live example here - https://jsfiddle.net/Rit_Design/9mkvffnk/1/
Remember the code can be much more smarter.
Related
i am trying to make my splash screen overlap the website.
The splash screen gets pushed away by the elements that i want on the background.
here is my HTML
<!DOCTYPE html>
window.OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "355bfb40-16e9-48aa-93c3-d9eb93775989",
});
});
Rabbadz
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,600&subset=latin-ext" rel="stylesheet">
<!-- CSS -->
<link href="assets/css/main.css" rel="stylesheet">
<!-- JS -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="assets/js/vendor/jquery-1.12.0.min.js"></script>
<script src="assets/js/plugins/animate-headline.js"></script>
<script src="assets/js/main.js"></script>
</head>
<body>
<audio id="myAudio">
<source src="assets/sound.mp3" type="audio/mpeg">
</audio>
<!--logo-->
<img src="assets/images/logo.png" class="logo">
<!-- Options headline effects: .rotate | .slide | .zoom | .push | .clip -->
<div class="hero-section hero-section--color clearfix zoom">
<!--we are rabbadz-->
<div class="anitext">
<div class="title-01 title-01--11 text-center">
<h2 class="title__heading">
<div class="hero-section__words text-center">
<div class="title__effect is-visible">WE ARE RABBITS</div>
<div class="title__effect">WE ARE BADASS</div>
<div class="title__effect">WE ARE RABBADZ</div>
</div>
</h2>
<div class="title__description">Coming soon to the metaverse.</div>
<!-- Options btn color: .btn-success | .btn-info | .btn-warning | .btn-danger | .btn-primary -->
<div class="title__action">MINT</div>
</div>
</div>
</div>
</div>
</div>
<!--Particles-->
<div
id="particles-js"></div>
<script src="assets/js/particles.js"></script>
<script src="assets/js/app.js"></script>
<!-- splashscreen-->
<div class="scene content-hidden scene">
<div class="scene">
<div class="moon"></div>
</div>
<script type="text/javascript">
function stars(){
let count = 500;
let scene = document.querySelector('.scene');
let i = 0;
while(i < count){
let star = document.createElement("i");
let x = Math.floor(Math.random() * window.innerWidth);
let y = Math.floor(Math.random() * window.innerHeight);
let duration = Math.random() * 10;
let size = Math.random() * 2;
star.style.left = x+'px';
star.style.top = y+'px';
star.style.width = 1+size+'px';
star.style.height = 1+size+'px';
star.style.animationDuration = 5+duration+'s';
star.style.animationDelay = duration+'s';
scene.appendChild(star);
i++
}
}
stars();
</script>
<!--Rabbadverse button-->
$(function() {
var scene = $('.scene'),
enterButton = scene.find('.knop');
setTimeout(function() {
scene.removeClass('content-hidden');
}, 500);
enterButton.on('click', function(e) {
e.preventDefault();
scene.addClass('content-hidden').fadeOut();
});
var anitext = $('.forest'),
enterButton = scene.find('.knop');
setTimeout(function() {
forest.removeClass('content-hidden');
}, 500);
enterButton.on('click', function(e) {
e.preventDefault();
forest.addClass('content-hidden').fadeOut();
});
});
</script>
var x = document.getElementById("myAudio");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
</body>
If I understand it right, you want your "scene" div above the black background div.
You could achieve this by this simple css:
.scene {
position: fixed; /* make it relative to the viewport */
inset: 0; /* make the div close to the edge of the relative element, here the viewport, so it takes the full screen */
}
I have 4 pictures and want them to periodically change class (I have .active class, which is similar to hover).
.active,
.pic:hover{
position: absolute;
border: 1px solid black;
transform: scale(1.1);
transition: transform .2s;
}
Basically I need the first picture to have the class active and after some time change it so the next picture has the class and the first one lose it.
Is something like that even possible?
Picture in HTML:
<div class="products">
<a href="http://example.com/produkt1">
<img class="pic" src="image.jpg" alt="image" width="75" height="75">
</a>
</div>
and JS:
productIndex = 0;
slideshow();
function slideshow(){
var i;
var pic = document.getElementsByClassName("pic");
for(i = 0; i < pic.length; i++){
pic[i].className = pic[i].className.replace("active", "");
}
productIndex++;
if(productIndex > pic.length){
productIndex = 1;
}
pic[productIndex-1].className += active;
setInterval(slideshow, 2000);
}
You can use setInterval to run a function periodically that will change the active class. Something like this (psuedo-code):
var imageArray = [];
var activeIndex = 0;
setInterval(function(){
imageArray[activeIndex].removeClass('active');
activeIndex++;
activeIndex %= 4;
imageArray[activeIndex].addClass('active');
}, 5000);
The number value passed in as a parameter is how many milliseconds to wait before running the function again. In this example, 5 seconds will pass between the classes are changed.
setInterval Reference
This is ugly but it could work for super basic ... You just need to update the div blocks with images if necessary. Uses jquery...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style>
div {
width:50px;
height:50px;
background-color: black;
margin-bottom:10px;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div id="pic1"></div>
<div id="pic2"></div>
<div id="pic3"></div>
<div id="pic4"></div>
<script>
let lastActive = 0;
setInterval(()=>{
$('div').removeClass('active');
if(lastActive === 0){
$('#pic1').addClass('active');
lastActive = 1;
}
else if(lastActive === 1){
$('#pic2').addClass('active');
lastActive = 2;
}
else if(lastActive === 2){
$('#pic3').addClass('active');
lastActive = 3;
}
else if(lastActive === 3){
$('#pic3').addClass('active');
lastActive = 4;
}
else if(lastActive === 4){
$('#pic1').addClass('active');
lastActive = 1;
}
}, 500)
</script>
</body>
</html>
Matt L. has a good point here. Your code has the setInterval inside your slideshow function, otherwise it's fine.
productIndex = 0;
slideshow();
function slideshow(){
var i;
var pic = document.getElementsByClassName("pic");
for(i = 0; i < pic.length; i++){
pic[i].className = pic[i].className.replace("active", "");
}
productIndex++;
if(productIndex > pic.length){
productIndex = 1;
}
pic[productIndex-1].className += active;
}
setInterval(slideshow, 2000);
could probably work. Matt's answer is a lot better, and I came up with something similar, which is testable on jsfiddle.
You could do it like this for example:
$(document).ready(function() {
setInterval(function() {
var active = $('.active');
active.nextOrFirst().addClass('active');
active.removeClass('active');
}, 3000);
});
$.fn.nextOrFirst = function(selector)
{
var next = this.next(selector);
return (next.length) ? next : this.prevAll(selector).last();
};
.active,
.pic:hover{
border: 1px solid black;
}
.pic {
width: 150px;
margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image-container">
<img class="pic active" src="https://via.placeholder.com/350x150">
<img class="pic" src="https://via.placeholder.com/350x150">
<img class="pic" src="https://via.placeholder.com/350x150">
<img class="pic" src="https://via.placeholder.com/350x150">
</div>
Edit:
This, instead of most other solutions, will work with any amount of items. To use it only on pictures just specify via selector in the function.
Checkout this working example. I've made use of a combination of setInterval and setTimeout.
$(window).ready(()=>{
// get all the images inside the image-container div
let $images = $('.image-container').find('.image');
let currImage = 0;
// execute this code every 2 seconds
window.setInterval(()=>{
// add the active class to the current image
$($images[currImage]).addClass('active');
setTimeout(()=>{
// execute the code here after 1.5 seconds
// remove the active class from the previous image
$($images[currImage-1]).removeClass('active');
}, 1500);
// make sure we don't go over the number of elements in the collection
currImage = currImage >= $images.length ? 0 : currImage + 1;
}, 2000);
});
.image.active {
border: thin solid blue;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="image-container" class="">
<img src="https://via.placeholder.com/200x200" class="image active">
<img src="https://via.placeholder.com/200x200" class="image">
<img src="https://via.placeholder.com/200x200" class="image">
<img src="https://via.placeholder.com/200x200" class="image">
</div>
Do make sure that the code in setTimeout will execute before the next interval. Meaning, the time set for setTimeout is always less than setInterval's :)
Yes it is possible:
function carousel() {
var images = document.querySelectorAll(".container img");
for(var i = 0; i < images.length; i++) {
if(images[i].classList.contains("active")) {
images[i].classList.remove("active");
if(i == images.length - 1) {
images[0].classList.add("active");
} else {
images[i + 1].classList.add("active");
}
break;
}
}
}
setInterval(carousel,1000);
img {
width: 100px;
margin-left: 10px;
transition: .2s;
}
.active {
transform: scale(1.1);
}
<div class="container">
<img src="https://i.stack.imgur.com/cb20A.png" class="active"/>
<img src="https://i.stack.imgur.com/cb20A.png"/>
<img src="https://i.stack.imgur.com/cb20A.png"/>
<img src="https://i.stack.imgur.com/cb20A.png"/>
</div>
You can then replace the .active class by whatever you want.
I had a simple JS script which takes an array of images and display them as an animation by clicking a start button.
I am trying to stop the animation by clicking on the stop button (stop on the current image of the animation), which does not work.
I will appreciate any help. Thanks
<script type="text/javascript">
var images = new Array("unc_prop_1dim_x1.jpg", "unc_prop_1dim_x2.jpg",
"unc_prop_1dim_x3.jpg", "unc_prop_1dim_x4.jpg", "unc_prop_1dim_x5.jpg");
var nextImage = 0; //Index for nextImage
var timeout = 400; //In milliseconds
function animation() {
document.ani.src = images[nextImage];
nextImage++;
if (nextImage==images.length) {
nextImage = 0;
}
setTimeout("animation();", timeout);
};
function stopAnimation() {
ani.stop();
}
document.querySelector('#stop').onclick = function() {
stopAnimation();
};
</script>
<body>
<div id="main" style="width: 700px; height: 500px;">
<img src="unc_prop_1dim_x1.jpg" name="ani"/>
</div><br>
<input type="button" id="start" onclick="animation();" value="Start Animation">
<input type="button" id="stop" value="Stop!">
</body>
I am not too experienced with JavaScript.
I have created a website with 5 divs on the container. When I added the Slideshow with JavaScript all the images jump to the top and the image I use as header for the site becomes another image from the slideshow.
I tried assigning a class to the images on the slideshow, but I dont know how to incorporate this to the code on JavaScript so that it only focuses on those (instead of all the images on my page).
(THANKS A LOT IF ANYONE CAN HELP!!! I am not being lazy, I just can not seem to find the answer!!!)
Here is the code:
<style type="text/css">
body {
background-image: url(layout/background.png);
}
img{
-webkit-transition-property:opacity;
-webkit-transition-duration:5s;
position:absolute;
width:320;
height:auto;
}
img.fade-out{opacity:0;}
img.fade-in{opacity:1;}
</style>
</head>
<body>
<div id="container">
<div id="header">
<br>
<ul>
<li><img src="main-menu4.gif" width="984" height="290" ></li>
</ul>
</div>
<div id="main_image">
<h1>Events</h1>
<br>
<img class="slideshow" src="hotdog.jpeg" width="450" height="auto" >
<img src="girlonslide.jpeg" width="450" height="auto" class="slideshow">
<img src="games/extremefun.jpg" width="450" height="auto" class="slideshow">
<img src="games/climbing.jpeg" width="450" height="auto" class="slideshow">
<img src="games/cartgame.jpeg" width="450" height="auto" class="slideshow">
<img src="pizza.JPG" width="450" height="auto" class="slideshow">
<script>
var interval = 4 * 20; //Seconds between change
var images = document.getElementsByTagName("img");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images [i];
}
imageArray.sort(randomize);
var fade = function() {
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</body>
</html>
I really dont know what I am doing wrong!
You seem to be targeting all the image tags in your page. You need to limit that to only the images in your div#main_image.
To do that replace
var images = document.getElementsByTagName("img");
with
var images = document.getElementById("main_image").getElementsByTagName("img");
I am new to this and have a quick question. I have a very simple slideshow on my home page. The problem I am having is the first second or so of loading the page, the slideshow images show up 1 on top of the other. Once the first second or so of loading the page is over, everything works fine. Here is my code for the javascript:
<script type="text/javascript" language="javascript">
window.onload = function () {
var rotator = document.getElementById("slideshow_content");
var images = rotator.getElementsByTagName("img");
for (var i = 1; i < images.length; i++) {
images[i].style.display = "none";
}
var counter = 1;
setInterval(function () {
for (var i = 0; i < images.length; i++) {
images[i].style.display = "none";
}
images[counter].style.display = "block";
counter++;
if (counter == images.length) {
counter = 0;
}
}, 3000);
};
</script>
Here is the body code:
<div id="slideshow">
<div id="slideshow_content" style="padding-top:10px; padding-bottom:10px;">
<img alt="" src="/images/slide1.jpg" />
<img alt="" src="/images/slide2.jpg" />
</div>
</div>
Here is the CSS for the 2 divs:
#slideshow {position:relative; top:0; left:0; max-width:1680px; height:342px; margin:0 auto; padding:0; background-color:#070707;}
#slideshow_content {width:960px; max-height:322px; margin:0 auto; padding:0;}
How would you recommend fixing this?
I would set the CSS to hide the slideshow on page load, and then when the slideshow starts it could be unhidden.
This would also mean that if someone had javascript disabled they wouldn't get a weird looking pile of images.
Alternatively you could hide all but the first image using CSS, so that even if someone had javascript disabled they would see the first image.