Make splashscreen overlap elements

Make splashscreen overlap elements - javascript

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 */
}

Related

How can I add color on clicking specific elements that were generated by JS

I'm creating a pixel art maker with HTML, CSS, and vanilla JS. I've created my UI for the most part, but I can't get the functionality working. I've tried:
let cell = document.body.querySelectorAll('.grid-square');
cell.addEventListener('click', function() {
cell.style.backgroundColor = 'red';
});
But my page 'addEventListener' isn't a function. How do I get my JS to load after the HTML so I can get this to work?
https://jsfiddle.net/wygtshu6/1/

let cells = document.body.querySelectorAll('.grid-square'); // querySelectorAll return all elements which have grid-square class.
for(let i = 0; i < cells.length; i++){
cells[i].addEventListener('click', function(){
cells[i].style.backgroundColor = "red";
});
}

There are just 2 steps you need to get this working:
querySelectorAll returns an array of elements so you need to loop through them to add the listener to each cell:
function setUpCellListeners(){
let cells = document.querySelectorAll('.grid-square');
cells.forEach((cell) => {
cell.addEventListener('click', function() {
cell.style.backgroundColor = 'red';
});
});
}
You need to do this after the cells have been created. They are created in the createGrid function, so we can do that by calling it at the end of that function:
//function to build the grid based on user input
function createGrid(height = 25, width = 25) {
/* code to set up grid.... */
// NOW we can set up our listeners because our grid is created
setUpCellListeners();
}
Working Example:
let canvas = document.querySelector('.canvas');
let button = document.querySelector('button');
let high;
let wide;
let color = document.querySelector('.colorChoice').value;
function setUpCellListeners(){
let cells = document.querySelectorAll('.grid-square');
cells.forEach((cell) => {
cell.addEventListener('click', function() {
cell.style.backgroundColor = 'red';
});
});
}
//function to build the grid based on user input
function createGrid(height = 25, width = 25) {
canvas.innerHTML = '';
for (let i = 0; i < height; i++) {
let row = document.createElement('div');
row.classList.add('row');
canvas.appendChild(row);
for (let j = 0; j < width; j++) {
let cell = document.createElement('div');
cell.classList.add('grid-square');
row.appendChild(cell);
}
}
setUpCellListeners();
}
//listens for input of rows and columns
button.addEventListener('click', function() {
high = parseInt(document.querySelector('.column-input').value);
wide = parseInt(document.querySelector('.row-input').value);
if (Number.isNaN(high) || Number.isNaN(wide)) {
createGrid();
} else {
createGrid(wide, high);
}
});
//Default grid built on load
window.onload = createGrid(25, 25);
.grid-square {
height: 12px;
width: 12px;
border: 1px black solid;
}
.row {
display: flex;
justify-content: center;
}
.canvas {
max-height: inherit;
max-width: 75%;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Navbar -->
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1 mx-auto navbar-brand">Pixel Art Maker</span>
</nav>
<!-- Container to put grid in -->
<div class="container shadow p-3 mb-5 bg-white rounded mt-5 main">
<div class="container canvas d-flex-inline">
</div>
<form class="d-flex-inline w-50 mx-auto">
<div class="d-flex">
<div class="form-group w-25 ml-auto mr-2">
<label class="d-block text-center" for="gridRows">Rows</label>
<input type="number" class="form-control row-input" id="gridRows">
</div>
<div class="form-group w-25 mr-auto ml-2">
<label class="d-block text-center" for="gridColumns">Columns</label>
<input type="number" class="form-control column-input" id="gridColumns">
</div>
</div>
</form>
<div class="form-group w-25 mx-auto">
<button type="submit" class="btn btn-primary w-100">Submit</button>
</div>
<form class="d-flex-inline w-50 mx-auto">
<div class="form-group w-25 mx-auto">
<label for="color">Color</label>
<input type="color" class="form-control colorChoice" id="color">
</div>
</form>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS, then local JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Working code in a jsfiddle: https://jsfiddle.net/has024gr/

slider shows a single image

I have three images which I want to be in a slide show using javascript, the problem is that it shows the first image only and blank for the other two. What can the problem be?
I have searched the internet for similar solutions but they do not work with my situation.
<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
<div class="item-slide slide1">
<img src="images/banners/slide2.jpg">
</div>
<div class="item-slide slide1">
<img src="images/banners/slide1.jpg">
</div>
<div class="item-slide slide1">
<img src="images/banners/slide3.jpg">
</div>
</div>
<!-- ============== main slidesow .end // ============= -->
<!-- ============== slider auto scroll js ============= -->
<script>
let sliderImages = document.querySelectorAll('.item-slide'),
current=0;
//clear all images
function reset(){
for(let i = 0; i < sliderImages.length; i++){
sliderImages[i].style.display = 'none';
}
}
//init slider
function startSlide(){
reset();
sliderImages[current].style.display = 'block';
if(current < sliderImages.length - 1){
current++;
//document.write(current)
}
else{
current = 0;
//document.write(current)
}
//document.write(sliderImages.length);
setTimeout("startSlide()",2000);
}
startSlide();
</script>

Please check the image URL that you have given. It's working for me
<div class="owl-init slider-main owl-carousel" data-items="1" data-nav="true" data-dots="false">
<div class="item-slide slide1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png">
</div>
<div class="item-slide slide1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/boat.png">
</div>
<div class="item-slide slide1">
<img src="https://homepages.cae.wisc.edu/~ece533/images/pool.png">
</div>
</div>
<!-- ============== main slidesow .end // ============= -->
<!-- ============== slider auto scroll js ============= -->
<script>
let sliderImages = document.querySelectorAll('.item-slide'),
current=0;
//clear all images
function reset(){
for(let i = 0; i < sliderImages.length; i++){
sliderImages[i].style.display = 'none';
}
}
//init slider
function startSlide(){
reset();
sliderImages[current].style.display = 'block';
if(current < sliderImages.length - 1){
current++;
//document.write(current)
}
else{
current = 0;
//document.write(current)
}
//document.write(sliderImages.length);
setTimeout("startSlide()",2000);
}
startSlide();
</script>

Problem with image 'rotations' within a div element

I'm using the code below to create a 'rotation' of images for display on a website. I wish for the images to display within a 'div' element...and i'm having trouble accomplishing that. It seems the problem is when I attempt to set each image as the 'background image' for the element (the line that reads "document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";). Only the initial image displays, without any 'rotation' of other images. Any help appreciated, this is becoming very frustrating.
<!DOCTYPE html>
<html>
<title>test page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<head>
<style>
div.rotation {
height: 256px;
width: 100%;
padding: 0px;
background-color: powderblue;
border-style: solid;
border-width: 5px;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="w3-quarter">
<div class="w3-padding-small">
<div class="w3-center">
<div class="rotation">
<p>
<img src='images/rotation/LA_Panel.png' id='rotateImg0' alt='image rotation' />
<img src='images/rotation/McCulloch_256.png' id='rotateImg1' style='display:none;' alt='image rotation' />
<img src='images/rotation/MO_Panel.png' id='rotateImg2' style='display:none;' alt='image rotation' />
<img src='images/rotation/Rommel.png' id='rotateImg3' style='display:none;' alt='image rotation' />
</p>
</div>
</div>
</div>
</div>
</body>
</html>
<script type='text/javascript'>
var rotation = function () {
var currentImage,
images = [],
ImgName = [],
count,
hideImages,
showImage,
fn;
count = (function () {
// Figure out how many images we have on the rotation
var x = 0;
while (document.getElementById('rotateImg' + (x + 1).toString())) {
images[x] = document.getElementById('rotateImg' + x.toString());
ImgName[x] = document.getElementById('rotateImg' + x.toString()).src;
x++;
}
return images.length;
})();
hideImages = function () {
// Hide all the images
for (var i = 0; i < count; i++) {
images[i].style.display = 'none';
}
};
showImage = function (number) {
document.getElementById("rotation").style.backgroundImage = "url(toString(ImgName[number]))";
images[number].style.display = 'block';
};
fn = {};
fn.setupRotation = function () {
// Show the first image
currentImage = 0;
showImage(currentImage);
// Start the rotation
var interval = setInterval(rotation.advanceRotation, 4000);
};
fn.advanceRotation = function () {
if (currentImage + 1 == count)
currentImage = 0;
else
currentImage++;
hideImages();
showImage(currentImage);
};
return fn;
} ();
rotation.setupRotation();
</script>

One thought might be to pluck off the first child and slam him to the end of the line.
let images = document.querySelector('#images');
setInterval(() => {
let el = images.removeChild(images.childNodes[0]);
images.appendChild(el);
}, 1000);
#images {
font-size: 0;
}
.img {
display: inline-block;
width: 30px;
height: 30px;
}
<div id="images">
<div class="img" style="background-color: red"></div>
<div class="img" style="background-color: orange"></div>
<div class="img" style="background-color: yellow"></div>
<div class="img" style="background-color: green"></div>
<div class="img" style="background-color: blue"></div>
</div>

Angular + jQuery, trigger scroll when src of image changes

I am trying to use jQuery to scroll to a particular thumbnail (inside a modal) when right/left arrows have been pressed (modal should pop up when user clicks on a image). I was able to make the scroll working when user clicks on a thumbnail but I could not trigger a click when variable current2 changes. Any help would be appreciated.
I am new in Angular.js so if there are other suggestions to improve the code, it would be appreciated.
jsbin link
<body ng-app="mediaGallery" class="ng-cloak" ng-controller="mediaGalleryCtrl">
<div class="row">
<div class="small-8 columns">
<div class="small-3 columns">
<div ng-repeat="obj in array">
<div ng-if="$index < 4">
<img ng-click="changeMainMedia($index, 'current1')" class="thumbnail" ng-src="{{obj.src}}" />
</div>
<div ng-if="$index == 4">
<div class="thumbnail" data-open="media-gallery">
<label class="text-right success label">{{array.length - 3}} +</label>
</div>
</div>
</div>
</div>
<div class="small-9 columns">
<img data-open="media-gallery" class="main-gallery" ng-src="{{array[current1].src}}" />
</div>
</div>
</div>
<div ng-keydown="key($event)" id="media-gallery" class="small reveal text-center media-gallery" data-reveal>
<div class="modal-body">
<div class="main-media">
<img class="main-gallery media-gallery-main" ng-src="{{array[current2].src}}" />
<hr>
<div class="nested-media" scroll-thumbnail>
<img ng-click="changeMainMedia($index, 'current2')" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" />
</div>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">x</span>
</button>
</div>
</div>
<script>
var app = angular.module("mediaGallery", []);
app.controller("mediaGalleryCtrl", ['$scope', function(scope) {
var array = [{
src: "https://placeimg.com/640/480/any"
}, {
src: "https://placeimg.com/640/480/tech"
}, {
src: "https://placeimg.com/640/480/animals"
}, {
src: "https://placeimg.com/640/480/nature"
}, {
src: "https://placeimg.com/640/480/arch"
}, {
src: "https://placeimg.com/640/480/people"
}];
scope.array = array;
scope.current1 = 0
scope.current2 = 0;
scope.changeMainMedia = function(index, key) {
scope[key] = index;
}
scope.key = function($event) {
var previous = -1;
var current = scope.current2;
if ($event.keyCode == "39") {
previous = current;
current = (current + 1) % array.length;
} else if ($event.keyCode == "37") {
previous = current;
current = (current - 1) % array.length;
}
current = current < 0 ? (array.length + current) : current;
scope.current2 = current;
}
}]);
app.directive('scrollThumbnail', function() {
return {
link: function(scope, elem, attrs) {
elem.on("click", function(event) {
$(this).animate({
scrollLeft: $(event.target).position().left
}, "slow");
});
}
};
});
$(document).foundation()
</script>
</body>

This is a solution which does not need jQuery. I commented the changes that I have made to your code.
<!DOCTYPE HTML>
<html>
<head>
<title>index</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" />
<meta name="author">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.js"></script>
<style>
.media-gallery .media-gallery-thumbnail {
max-height: 5em;
display: inline-block
}
.media-gallery .media-gallery-main {
height: auto;
width: auto;
max-height: 20em;
}
.media-gallery .nested-media {
overflow-x: scroll;
white-space: nowrap;
}
.media-gallery .media-gallery-main {
max-width: 100%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.media-gallery .media-gallery-main:hover {
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="mediaGallery" class="ng-cloak" ng-controller="mediaGalleryCtrl">
<div class="row">
<div class="small-8 columns">
<div class="small-3 columns">
<div ng-repeat="obj in array">
<div ng-if="$index < 4">
<img ng-click="changeMainMedia($index, 'current1', $event)" class="thumbnail" ng-src="{{obj.src}}" />
</div>
<div ng-if="$index == 4">
<div class="thumbnail" data-open="media-gallery">
<label class="text-right success label">{{array.length - 3}} +</label>
</div>
</div>
</div>
</div>
<div class="small-9 columns">
<img data-open="media-gallery" class="main-gallery" ng-src="{{array[current1].src}}" />
</div>
</div>
</div>
<div ng-keydown="key($event)" id="media-gallery" class="small reveal text-center media-gallery" data-reveal>
<div class="modal-body">
<div class="main-media">
<img class="main-gallery media-gallery-main" ng-src="{{array[current2].src}}" />
<hr>
<div class="nested-media" scroll-thumbnail>
<img ng-click="changeMainMedia($index, 'current2', $event)" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" />
</div>
</div>
<button class="close-button" data-close aria-label="Close reveal" type="button">
<span aria-hidden="true">x</span>
</button>
</div>
</div>
<script>
var app = angular.module("mediaGallery", []);
app.controller("mediaGalleryCtrl", ['$scope', function (scope) {
var array = [{
src : "https://placeimg.com/640/480/any"
}, {
src : "https://placeimg.com/640/480/tech"
}, {
src : "https://placeimg.com/640/480/animals"
}, {
src : "https://placeimg.com/640/480/nature"
}, {
src : "https://placeimg.com/640/480/arch"
}, {
src : "https://placeimg.com/640/480/people"
}
];
scope.array = array;
scope.current1 = 0
scope.current2 = 0;
scope.changeMainMedia = function (index, key, $event) {
scope[key] = index;
// Use scroll function to scroll to element after click
// $event parameter is added to retrieve the node value
scope.scroll($event.target);
}
// Animate scrolling
// Midified from: http://stackoverflow.com/a/8918062/529024
scope.scrollTo = function (element, to, duration) {
if (duration <= 0)
return;
var difference = to - element.scrollLeft;
var perTick = difference / duration * 10;
setTimeout(function () {
element.scrollLeft = element.scrollLeft + perTick;
if (element.scrollLeft === to)
return;
scope.scrollTo(element, to, duration - 10);
}, 10);
}
// calculate scroll position and starting scroll animation
scope.scroll = function (element) {
// Get center of parent
var left = element.offsetLeft;
var scroll = left - element.parentElement.scrollLeft;
// Start scroll
scope.scrollTo(element.parentElement, scroll, 300);
}
scope.key = function ($event) {
var previous = -1;
var current = scope.current2;
if ($event.keyCode == "39") {
previous = current;
current = (current + 1) % array.length;
} else if ($event.keyCode == "37") {
previous = current;
current = (current - 1) % array.length;
}
current = current < 0 ? (array.length + current) : current;
scope.current2 = current;
// Scroll to element
scope.scroll(scope.getElement());
}
// get the element that is matching current2 value
scope.getElement = function () {
var parent = scope.parentElement;
var children = parent.children();
return children.eq(scope.current2)[0];
}
// This function is used by directive scrollThumbnail to set the parent element
// and use it to get element sibilings
scope.setElement = function (element) {
scope.parentElement = element;
}
}
]);
app.directive('scrollThumbnail', function () {
return {
scope : true,
link : function (scope, elem, attrs) {
// set element to scope.parentElement.
scope.setElement(elem);
}
};
});
$(document).foundation()
</script>
</body>
</html>
And this a JSBin link: https://jsbin.com/ruzikilexe/1/edit?html,output

How can I add fade in, fade out effects

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.

We Keep Coding

JavaScript is the programming language of the Web.

Make splashscreen overlap elements - javascript

Related

How can I add color on clicking specific elements that were generated by JS

slider shows a single image

Problem with image 'rotations' within a div element

Angular + jQuery, trigger scroll when src of image changes

How can I add fade in, fade out effects

Categories

Resources