How to add transition sliding image for my slideshow? - javascript

Im working in an image slider. What I was able to do is very simple, and I want to add a transition effect like image sliding , or something like that. If someone knows how to add it to my code it would help me a lot. Here is what I did so far:
.banner-container {
width: 100%;
position: relative;
z-index:0;
height:100% !important;
background: no-repeat center center scroll
}
.banner-container.nomgr {
margin-top:0px;
}
.banner-container-center {
margin-top:-105px;
width: 100%;
position: relative;
z-index:0;
}
.banner {
width: 100%;
position: relative;
z-index:0;
height:120 !important;
background: no-repeat center center scroll
}
.banner-full-height {
width: 100%;
height:auto;
position: relative;
z-index:2;
}
.banner-center {
width: auto;
position: relative;
z-index:2;
}
<div class="banner-container revolution">
<div class="banner">
<ul>
<li > <img src="/images/slide1.png" /></li>
<li > <img src="/images/slide2.png" /></li>
<li > <img src="/images/slide3.png" /></li>
</ul>
</div>
</div>

I have edited your code to add the effect. Change the image source before using
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0px;
width: 100%;
padding: 0px;
}
.ani-top{position:relative;animation:animatetop 0.5s}
#keyframes animatetop{from{top:-500px;opacity:0}
to{top:0;opacity:1}}
</style>
</head>
<body>
<div style="max-width:500px">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(1).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(2).jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download.jpg" style="width:100%">
<img class="slidetop ani-top" src="file:///C:/Users/Administrator/Desktop/download%20(3).jpg" style="width:100%">
</div>
<script type="text/javascript">
var pos = 0;
slideshow();
function slideshow() {
var i;
var x = document.getElementsByClassName("slidetop");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
pos++;
if (pos > x.length) {pos = 1}
x[pos-1].style.display = "block";
setTimeout(slideshow, 2500);
}
</script>
</body>
</html>

Related

Overlap multiple images

I want to create a image object composed of 3 images.
Final picture how it should look like
There is one text image and two "gear" images.
Why I want to split them you ask? I want to implement a scrolling function which spins the gears of the image when scrolling down the page.
Later on I want that image object to be always on top at the left corner. Thats why I choose relative position. Cause the gears always have to stay relative to the text.
I got the function already but somehow Im having problems stacking the images onto eachother.
Thats how it currently looks like.
Current state
function rotate(e) {
e.preventDefault();
rot += e.deltaY * 0.5;
leftGear.style.transform = `rotate(${rot}deg)`;
rightGear.style.transform = `rotate(${rot}deg)`;
}
let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;
/* To make white images become visible */
body { background: #161924 }
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
z-index: 2;
}
.leftGear {
position: relative;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="40">
</div>
</div>
gearText.png (It has some blueish background so it doesn't overlap the wrong sections)
gear.png
You can play with absolute position and z-index here.
body {
background: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.nav-logo {
position:relative;
}
.rightGear {
position: absolute;
top: 12px;
left: 3px;
z-index: -1;
}
.leftGear {
position: absolute;
bottom: 6px;
right: 5px;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>
</body>
</html>
You need to wrap the first image into another div then make all of your positions absolute. Here's an example
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: absolute;
z-index: 2;
}
.leftGear {
position: absolute;
z-index: 2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
.main{
position: absolute;
}
<div class="nav-logo" style="display: block">
<div class="main">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="60">
</div>
<div class="rightGear" id="rightgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
<div class="leftGear" id="leftgear">
<img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
</div>
</div>
Just move those gears with position properties, depending on what you need. Also the gears are under the main logo, so they should have lower z-index than the main logo.
Also change the height of each gear from 40 to 30.
body {
background: #161924
}
.nav-logo {
width: 40px;
height: 40px;
}
.rightGear {
position: relative;
top: -52px;
left: 3px;
z-index: -2;
}
.leftGear {
position: relative;
top: -69px;
left: 27px;
z-index: -2;
}
.leftGear img {
display: block;
}
.rightGear img {
display: block;
}
<div class="nav-logo" style="display: block">
<img src="https://i.stack.imgur.com/vSCDm.png" height="60">
<div class="rightGear" id="rightgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
<div class="leftGear" id="leftgear">
<img src="https://i.stack.imgur.com/6541L.png" height="30">
</div>
</div>

Transitions with overlaps

So I have two divs which are overlapping, set by my CSS as shown below.
HTML:
<body onLoad="present();">
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: table; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>
</body>
CSS:
.pre-wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: red;
visibility: visible;
}
.wrap {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
background-color: black;
visibility: hidden;
}
I would like, when the body has loaded, a function to load which does the following: Fades in the image found in the div .pre-wrap, after displaying it for a few seconds, it will fade the image out and the div .pre-wrap will have it's visibility set to hidden. The second div .wrap will then fade in all of its contents.
I tried some simple JS but didn't achieve what I was after.
This question I would say is unique because it has overlapping divs which need visibilities being changed. Please note the overlapping already works, it's just the javascript fading that needs doing.
I tried the following JS which is very simple and works on other projects I've done however it doesn't on this one.
function present() {
$("#logo").fadeIn(3000);
}
Here is my code. I removed the property visibility in the css. And set the display of #logo to none. The attribute onload in the body is no longer needed.
var fadeTime = 3000; // Time for fading
var waitingTime = 5000; // Time how long image is visible
$(window).ready(function(){
$("#logo").fadeIn(fadeTime);
setTimeout(function(){
$(".pre-wrap").fadeOut(fadeTime);
$(".wrap").delay(fadeTime).fadeIn(fadeTime);
},fadeTime+waitingTime);
});
.pre-wrap, .wrap{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 700px;
width: 900px;
opacity: 1.0;
margin: auto;
}
.pre-wrap {
background-color: red;
}
.wrap {
background-color: black;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pre-wrap">
<img src="images/logo.png" id="logo" alt="Pre Logo" style="display: none; margin: 0 auto;" />
</div>
<div class="wrap">
<p>Test</p>
</div>

Using JavaScript to make title pop out in webpage?

I am making a webpage. Code can be found here:
https://jsfiddle.net/saTfR/43/
HTML:
<body>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png"
alt="map">
</body>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
</html>
CSS:
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
</style>
I want to insert some text which will have a "pop out" effect on top of the map image. How would I be able to do that?
On top of your map image. I assume you want it in the "center" of your image even if you scroll to the right you still want it to stick there.
You can easily create this by using the fadeIn method (jquery)
Here is the code:
HTML:
<p class="text">asdfasdfaa</p>
<img id="map" src="http://www.local-guru.net/img/guru/worldglow.png" alt="map"/>
<p class="text">asdfasdfaa</p>
<div id="sidebar">
<div class="logo">
<img id="logo" src="logo2.png" alt="Logo">
</div>
CSS: (adjust css to your needs)
* {font-family: Lucida Console; }
#sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
width: 230px;
height: 100%;
background-color: #CD6A51;
}
.text{
color:white;
z-index:999;
position:fixed;
left:60%;
font-size:25px;
}
JS
pop-up effect that you specified in the comment:
$(".text").hide().fadeIn(2000);
Here is also the code for your header text to disappear once you scroll down. When you scroll up it will reappear again.
var mywindow = $(window);
var pos = mywindow.scrollTop();
mywindow.scroll(function() {
if(mywindow.scrollTop() > pos)
{
$('.text').fadeOut();
}
else
{
$('.text').fadeIn();
}
pos = mywindow.scrollTop();
});
and here is the fiddle(updated) URL: https://jsfiddle.net/eugensunic/saTfR/48/

Transistions in swapping images

I just made a very simple "imageslider" but it does not slide, so lets call it a "imageswapper".
Alright. My question is now, how can I make it slide in and slide out so its smooth.
JSFIDDLE
[JS]
document.getElementById('atwo').style.display = "none";
function ImgSwap(){
if(document.getElementById('one').style.display == "block"){
document.getElementById('one').style.display = "none";
document.getElementById('two').style.display = "block";
}else{
document.getElementById('two').style.display = "none";
document.getElementById('one').style.display = "block";
}
}
[HTML]
<div id="wrapper">
<a onclick="ImgSwap()" id="aone"><img src="one.jpg" alt="one" class="img" id="one" /></a>
<a onclick="ImgSwap()" id="atwo"><img src="two.gif" alt="two" class="img" id="two" /></a>
</div>
[CSS]
img.img
{
height: 200px;
width: 300px;
}
#one
{
display: block;
}
#two
{
display:none;
}
a:hover
{
cursor: pointer;
}
div#wrapper
{
width: 300px;
}
There are many ways to achieve this effect, one way to do this is by applying css transition to your css class. You can change the opacity and position of the image to create the slides in effect.
function ImgSwap() {
document.getElementById('one').classList.toggle('show');
document.getElementById('two').classList.toggle('show');
}
div#wrapper {
width: 300px;
height: 200px;
position: relative;
background-color: black;
}
.img {
height: 200px;
width: 300px;
position: absolute;
top: 0;
left: -300px;
opacity: 0;
}
a:hover {
cursor: pointer;
}
.show {
left: 0;
opacity: 1;
transition: left 1s;
}
<div id="wrapper">
<a onclick="ImgSwap()" id="aone">
<img src="https://c2.staticflickr.com/6/5120/5824578555_d239d42195_b.jpg" alt="one" class="img show" id="one" />
</a>
<a onclick="ImgSwap()" id="atwo">
<img src="http://petsadviser.supercopyeditors.netdna-cdn.com/wp-content/uploads/2012/06/why-is-cat-scared-rain-thunder.png" alt="two" class="img" id="two" />
</a>
</div>

Simple gallery loading all pictures when opened for a first time

I am a beginer trying to make a gallery for my site, but I am failing somewhere. What I am trying to do is create a page with menu on the top and then under it boxes of small pictures. When you click on one of them, the picture should be loaded under those boxes. So far I have my menu done, and I have the boxes with the pictures, but the problem is that when you first load the page all of the pictures in the small boxes are loaded under and when you click on any boxes - they disapear and only the selected picture is loaded, as it should be. So my problem is that I can't make the page not load all those pictures when loaded for a first time. I don't mind if it just loads one of them, but not all. I've been trying to fix it for 3 days now, but no luck, so I have no choice, but to ask you for help.
Here's the HTML:
<!DOCTYPE HTML>
<HEAD>
<LINK href="Menu/Menu.css" rel="stylesheet" type="text/css" />
<LINK href="Pictures/Background.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="Style/style.css"/>
<script type="text/javascript" src="JavaScript/Script.js"></script>
</HEAD>
<BODY>
<nav class="nav">
<ul>
<li class="current"><b>MENU</b></li>
<li>BLOG</li>
<li>MUSIC</li>
<li>PHOTOGRAPHY</li>
<li>QUOTES & THOUGHTS</li>
<li>ABOUT ME</li>
</ul>
</nav>
<div id="gallery">
<div id="thumbs">
<img src="Pictures/Photography/image1.jpg" alt="" />
<img src="Pictures/Photography/image2.jpg" alt="" />
<img src="Pictures/Photography/image3.jpg" alt="" />
<img src="Pictures/Photography/image4.jpg" alt="" />
<img src="Pictures/Photography/image5.jpg" alt="" />
</div>
<CENTER>
<div id="bigimages">
<div id="normal1">
<img src="Pictures/Photography/bigimage1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="Pictures/Photography/bigimage2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="Pictures/Photography/bigimage3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="Pictures/Photography/bigimage4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="Pictures/Photography/bigimage5.jpg" alt=""/>
</div>
</div>
</div>
</BODY>
</HTML>
Here's the CSS:
html{
background:url(BACKGROUND.jpg) no-repeat center center;
min-height:100%;
background-size:cover;
}
img {
border: none;
}
#gallery {
margin: 0 auto;
width: 100%;
}
#thumbs {
margin: 10px auto 10px auto;
width: 100%;
}
#bigimages {
width: 100%;
float: left;
}
#thumbs img {
width: 50px;
height: 50px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
height: 500px;
}
#thumbs a:link, #thumbs a:visited {
width: 50px;
height: 50px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
And finally here's my simple JavaScript:
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
You could simply hide them via CSS.
#bigimages > div:not(:first-child) { display: none; }
This should display only the first big image.
Could be easier yet if you added a class to the image wrappers. Assuming the class could be big-image-wrap, the css would be:
#bigimages > div.big-image-wrap { display: none; }
#bigimages > div.big-image-wrap:first-child { display: block; }
You can hide those images on load event. Like this:
window.onload = function(){
var thumbs = document.getElementById('thumbs');
var images = thumbs.getElementsByTagName('img');
for (i = 0; i < images.length;i++ ) {
images[i].style.display = "none";
}
}

Categories