Image scroll fadeIn, go to next section when done - javascript

Things I'm trying to accomplish:
Images go to the next one based on scroll.
The images will cycle through, and when they are all done the view will proceed to the bottom section. A problem with what I have right now is that, when I scroll, the view doesn't stay on the image, but moves on to the rest of the page--so even if the image changes, the image is no longer in the viewport.
fadeIn when it goes to the next image (or use another animation).
When scrolling up, it goes back up the image sequence.
If there is a jQuery plugin that does this, please feel free to refer.
jsfiddle: http://jsfiddle.net/jzhang172/gcSe8/145/
$(document).ready(function () {
$(window).scroll(function () {
if ($(document).scrollTop() > 100) {
$(".img-container > img").fadeIn("slow").attr('src',' http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449');
} else if ($(document).scrollTop() > 110) {
$(".img-container > img").fadeIn("slow").attr('src','http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508');
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
}
.img-container img{
height:100%;
width:auto;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>

Try this:
$(document).ready(function () {
var images_index = 0;
var act_cycle = 0;
var n_cycles = 5;
var images = ["https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg","http://vignette3.wikia.nocookie.net/pokemon/images/1/13/007Squirtle_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105230449","http://vignette2.wikia.nocookie.net/pokemon/images/5/52/417Pachirisu_Pokemon_Ranger_Shadows_of_Almia.png/revision/latest?cb=20141021151508",]
$(window).on('DOMMouseScroll mousewheel', function (e) {
if ($(".img-container").is(':hover')){
if (e.originalEvent.wheelDelta < 0) {
if(images_index < images.length-1){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if(++act_cycle % n_cycles == 0){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[++images_index]).fadeIn("slow");
}
}
}
else {
if(images_index > 0){
$(document).scrollTop(".img-container");
e.preventDefault();
e.stopPropagation();
if (--act_cycle == -n_cycles){
act_cycle = 0;
$(".img-container > img").hide().attr('src',images[--images_index]).fadeIn("slow");
}
}
}
}
});
});
.left{
position:fixed;
left:0;
height:100%;
width:200px;
background:black;
color:white;
font-size:20px;
text-align:center;
z-index: 2;
}
body,html{
margin:0px;
}
.bottom{
height:500px;
width:100%;
background:gray;
}
.bottom p{
text-align:center;
font-size:40px;
}
.img-container{
height:700px;
width:100%;
z-index: 1;
}
.img-container img{
height:100%;
width:auto;
z-index: 1;
}
.img-container p{
position:absolute;
text-align:center;
color:#00FFF5;
font-size:30px;
margin:300px;
background:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
<p>
This is fixed!
</p>
</div>
<div class="img-container">
<p>
This section should stay focused on image until all images have been scrolled through and then it can go to the bottom.
</p>
<img src="https://i.kinja-img.com/gawker-media/image/upload/unnbgkdbmsszmazgxkmr.jpg">
</div>
<div class="bottom">
<p>
Please don't cover me
</p>
</div>
Explanation:
Images go to the next one based on scroll.
To solve this I just put in an array all the images, changing the src depending on the index of the array that I'm updating depending on the scroll direction (see wheelDelta)
The images will cycle through, and when they are all done the view
will proceed to the bottom section. A problem with what I have right
now is that, when I scroll, the view doesn't stay on the image, but
moves on to the rest of the page--so even if the image changes, the
image is no longer in the viewport.
To prevent the normal scroll I used the DOMMouseScroll and mousewheel events, then preventDefault and stopPropagation and I only fire this logic if the img-container is hover.
fadeIn when it goes to the next image (or use another animation).
I just first fadeOut, the change src and finally fadeIn
When scrolling up, it goes back up the image sequence.
Solved with the array of images.
In adition, I add some z-index, because of the behavior of the jQuerys fadeIn/Out and a scrollTop to fix the view on the image when is changing
UPDATE: If you want to change the image in a certain numbers of 'cycles' you can add a var to control it (here is n_cycles, change his value to change the number of cycles you want wait until image changes, I set it to 5 as you say in comments).

Related

Progress bar around all viewport?

I want to make a "full screen" progress bar : a 100% x 100% border who just fill in. Not easy to explain so i've made a quick draw.
http://hpics.li/998ef2e
Thanks a lot for ure ideas !
I crafted a solution using four divs, which approximates closely enough I think:
https://jsfiddle.net/svArtist/jexb9egm/
var i=0;
var myVar=setInterval(function () {myTimer()}, 10);
function myTimer() {
i++;
if(i<=100){
$("#top").css("width", i+"%");
}else if(i<=200){
$("#right").css("height", (i-100)+"%");
}else if(i<=300){
$("#bottom").css("width", (i-200)+"%");
}else if(i<=400){
$("#left").css("height", (i-300)+"%");
}else{
clearInterval(myVar);
}
}
#main, html, body{
height:100%;
width:100%;
position:relative;
margin:0;
overflow:hidden;
}
.loadbar{
background-color:#f00;
position:absolute;
}
#top, #bottom{
height:20px;
}
#left, #right{
width:20px;
}
#top{
top:0;
left:0;
}
#right{
top:0;
right:0;
}
#bottom{
bottom:0;
right:0;
}
#left{
bottom:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="loader">
<div id="top" class="loadbar">
</div>
<div id="right" class="loadbar">
</div>
<div id="bottom" class="loadbar">
</div>
<div id="left" class="loadbar">
</div>
</div>
</div>
(just incrementing from 0 to 400 here, use your progress percent*4 instead)
Although I've never seen this done, you could probably create this effect using Divs that disappear as the page loads. Basically, put a solid color as the background, and use a white div across each side (top left to top right, top right to bottom right, bottom right to bottom left, bottom left to top left) that shrinks as loading completes. This is the same effect as if the colored bar 'loaded' across the screen.
This may be a lot of work for a purely cosmetic effect.

what is the best way to show the pop-up on click of an image?

Here I have a jsFiddle
you can See there are 3 images of Players now What I want is Whenever I click on the image it should show the pop-up below the players.
Player can be In any position it will not be in a grid
so My question is What is the best way perform this.
I have something in my probably the wast it is like..
-- whether onclick of an Image I should change the position of the position of the popup image as well as span tag's text.
-- I should provide a popup to the every Player and just hide and show them
or something else you can suggest.It will help me a lot.
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
margin-left:50px;
}
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' id='p3'/>
<div id='player-popup'>
<span>Player1</span>
</div>
</div>
Thank you for spending time for me in advance Thank you.
<div id='player-back'>
<img src='http://s6.postimg.org/su0e7812l/player1.png' data-playerid="1" id='p1'/>
<img src='http://s6.postimg.org/afpv38orx/player2.png' data-playerid="2" id='p2'/>
<img src='http://s6.postimg.org/h7ga63drh/player3.png' data-playerid="3" id='p3'/>
<div id='player-popup' style="display:none">
<span>Player1</span>
</div>
</div>
Script:
$("img").click(function(){
var top = $(this).offset().top + $(this).width() + 2;
var left = $(this).offset().left - $(this).height() / 2;
$("#player-popup span").text("Player "+$(this).data("playerid"));
$("#player-popup").css({ top: top, left: left }).show();
});
css:
#player-back{
height:250px;
background:#0F0;
}
#p1{
margin-top:50px;
margin-left:80px;
}
#p2{
margin-left:150px;
}
#p3{
margin-left:200px;
}
#player-popup{
background:orange;
height:27px;
width:85px;
border-radius:10px;
text-align:center;
position:absolute;
}
Demo: https://jsfiddle.net/astm1o3p/21/
Here make chqnges in the css for popup set
position:absolute;

How to eliminate the flicker from this JQuery/CSS3 Animation

I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.

Absolute Positioned img inside absolute div doesnt position as expected

I have the following html
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="images/internal_banner_holder.png" />
<img class="internal_banner" src="images/about-banner.jpg" />
<div id="overlay">
<img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
</div>
</div>
</div>
css
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
}
#overlay_field
{
position: relative;
width:1000px;
height:250px;
overflow:hidden;
}
and the following script as mentioned by #rkw
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
});
});
The Effect I'm trying to achieve here is:
An image appears in as a banner "internal_banner"
When the mouse hovers over this image(or rather "overlay_field") a small div appears which follows the mouse. Now the contents of the div is another image "internal_banner_overlay"
I want this image to be positioned exactly as "internal_banner", i.e stay in the same place so it appears like the mouse let's you see another underlying image. The problem is the image doesn't stay at one place, it positions within the div and moves with the mouse rather than the document even though it's position is set to absolute.
In simple words, when the mouse moves over the banner area, it should appear like the cursor changed to a small box that let's you see through the banner at another image.
Just add the temp banner in the upper div and change its opacity on mouseover and mouseout events.
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="abcd.png" />
<img class="internal_banner permBanner" src="permBanner.png" />
<img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
</div>
</div>
JS:
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
var width = 250;
var height = 250;
var left = parseInt(e.pageX)-parseInt(pageXOffset);
var top = parseInt(e.pageY)-parseInt(pageYOffset);
var a = document.getElementById("temp");
a.style.opacity = 1;
a.style.left = "0px";
a.style.top = "0px";
a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";
});
});
Style
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block;
}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
}
#overlay_field
{
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
}​
#temp{position:absolute;}
Alternate:
Or alternatively you can add and remove the temporary banner on the mouseover and mouseout events.

It won't hover or let me click on images in my gallery

Since I've added this cropping effect (http://jsfiddle.net/BPEhD/2/) to the images in my gallery, there is no hover state on the images and it won't let click on them either. The pointer cursor appears when I hover over them, but it won't bring up the panel when I click on it. How can I solve this?
HTML:
<div id="thumbsWrapper">
<div id="content">
<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<p class="crop">
<img src="image2.jpg" alt="image2.jpg"/></p>
<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>
CSS:
#thumbsWrapper{
position:relative;
height:100%;
width:100%;
left:0px;
right:0px;
}
#content{
position:relative;
height:100%;
width:100%;
left:0px;
display:none;
}
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:200px;
height:200px;
}
.crop img{
position:absolute;
top:-50px;
left:-50px;
}
#content img{
float:left;
margin:5px 0px 5px 5px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
#panel{
background-color:#ddd;
width:100%;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:0px;
text-align:center;
z-index:999;
}
#panel img{
cursor:pointer;
position:relative;
border:1px solid #000;
-moz-box-shadow:0px 0px 10px #111;
-webkit-box-shadow:0px 0px 10px #111;
box-shadow:0px 0px 10px #111;
display:none;
}
Relevant JS:
$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $('#content img').size();
/* speed to animate the panel and the thumbs wrapper */
var speed = 500;
/* show the content */
$('#content').show();
/*
when the user resizes the browser window,
the size of the picture being viewed is recalculated;
*/
$(window).bind('resize', function() {
var $picture = $('#wrapper').find('img');
resize($picture);
});
/*
when hovering a thumb, animate it's opacity
for a cool effect;
when clicking on it, we load the corresponding large image;
the source of the large image is stored as
the "alt" attribute of the thumb image
*/
$('#content > img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
var $this = $(this);
/* shows the loading icon */
$('#loading').show();
$('<img alt="">').load(function(){
$('#loading').hide();
if($('#wrapper').find('img').length) return;
current = $this.index();
var $theImage = $(this);
/*
After it's loaded we hide the loading icon
and resize the image, given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$('#wrapper').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$('#panel').animate({'height':'100%'},speed,function(){
/*
I think the problem is with the selector you're using to match your image tags. You're using the child selector which only selects direct children of the selected element (see documentation). Since (I'm guessing) you've added p tags around your images to apply the cropping effect, the selector is no longer returning the images.
Try updating your code as follows:
$('#content img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
}
Note that this will select all elements that are descendants of the content div (see documentation) so, depending on what you're doing, you may want to consider a more specific selector.
Just a friendly hint, but a fully functioning fiddle demonstrating the issue would make it easier to help.

Categories