I am making a one page website and in the middle of the site i have a few images that i want to appear when the user is scrolling down. when the user is scrolling down, i want the image to fade in and stay at 100% opacity. Ive gone through loads of different scripts and none work. I have found a good code snipped but it still doesnt seem to be working. It just displays the image but with low opacity.
Here is the code:
<script>
var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.
$win.on('scroll', function() {
var scrollTop = $win.scrollTop();
$img.each(function() {
var $self = $(this);
var prev = $self.offset();
if (prev) {
var pt = 0;
pt = prev.top - $win.height();
$self.css({
opacity: (scrollTop - pt) / ($self.offset().top - pt)
});
} else {
$self.css({
opacity: 1
});
}
});
}).scroll();
</script>
<section id="about">
<h2><center>Header</center></h2>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;"> <img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555"></div>
</section>
Ok. So if I correctly understand what you want, you can block your fade effect when your images are already fade in this way :
var $win = $(window);
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$('img.hidden').each(function () {
var $self = $(this);
var prev=$self.offset();
if(prev){
var pt=prev.top-$win.height();
var opacity = (scrollTop-pt) / ($self.offset().top-pt);
$self.css({
opacity: opacity
});
if(opacity >= 1) $self.removeClass('hidden');
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
.wrapper {
background: orange;
height: 2000px;
}
.wrapper img {
width: 300px;
position: absolute;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<img class="hidden" style="top: 400px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
<img class="hidden" style="top: 1000px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg"/>
<img class="hidden" style="top: 1600px;" src="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg">
</div>
Try changing the part where you have the inline style of style="opacity: 0.1; . Usually inline styles override the CSS you might have in the style tag. Look at this example I set the inline style to blue but the set it in the css to red the blue wins. maybe that is what is cause your opacity to stay the same.
#element{
color:red;
}
<div id="element" style = "color:blue;">element</div>
That's one reason why it's better to add and remove classes for you styles
I see that your overriding the inline styles with other inline styles so the above may not have caused you problems anyways Here is your snippet working. I don't know exactly what you want. It fades in
$(function(){
var $win = $(window);
var $img = $('.fadeInScroll'); // Change this to affect your desired element.
$win.on('scroll', function () {
var scrollTop = $win.scrollTop();
$img.each(function () {
var $self = $(this);
var prev=$self.offset();
if(prev){
var pt=0;
pt=prev.top-$win.height();
$self.css({
opacity: (scrollTop-pt)/ ($self.offset().top-pt)
});
}
else{
$self.css({
opacity: 1
});
}
});
}).scroll();
})
.top{
height: 100vh;
background: rgba(120, 30, 200, 0.3);
}
.fadeInScroll{
width: 300px;
height: 500px;
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="top"></div>
<section id="about">
<h2><center>Header</center></h2>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
<div class="fadeInScroll" display:="" opacity:="0" style="opacity: 0.1;">
<img src="/ap/wsf1.png" alt="trulycode-responsive" class="aligncenter size-medium wp-image-555">
</div>
</section>
Related
When click CLICK HERE div id photo will set css to top: 300px; left: -400px; transform: rotate(-60deg) how can i add animate into this process ?
<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>
You can simply add transition:
<script type="text/javascript">
function swipeLike() {
var photo = document.getElementById("photo");
photo.style.top = "300px";
photo.style.transition = "0.4s";
photo.style.left = "-400px";
photo.style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>
It depends on which type of animation you want. You can use css3 transition property to animate things.
W3Schools Transition property
Easiest is to define a class with the elements that need to be animated. See below, hope this helps.
function swipeLike() {
document.getElementById("photo").classList.add("anim");
}
#photo {
transition: all 3s;
}
.anim {
top: 300px;
left: -400px;
transform: rotate(-60deg);
}
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div id="photo">
MOVING
</div>
</div>
<script type="text/javascript">
function swipeLike() {
document.getElementById("photo").style.top = "300px";
document.getElementById("photo").style.left = "-400px";
document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>
<br><br><br><br><br><br>
<div onclick="swipeLike()">
CLICK HERE
</div>
<div class="content">
<div style="transition:all 1s linear;" id="photo">
MOVING
</div>
</div>
I have three images in <section>
<section class="one">
<img src="one.png" />
</section>
<section class="two">
<img src="two.png" />
</section>
<section class="three">
<img src="three.png" />
</section>
I have added some css to position the sections:
$('.one').css({
position:'absolute',
top:100
});
$('.two').css({
position:'absolute',
top:800
});
$('.three').css({
position:'absolute',
top:1600
});
My problem is in the js - I want to position each element dynamically so for example the first section would be top 100px the section one would be 200px and the third one would be 300px. This is what i have managed so far:
$.fn.inView = function(){
var win = $(window);
obj = $(this);
var scrollPosition = win.scrollTop();
var visibleArea = win.scrollTop() + win.height();
var objEndPos = (obj.offset().top + obj.outerHeight());
var visible =(visibleArea >= objEndPos && scrollPosition <= objEndPos);
$.each( obj, function( index ) {
if(visible){
//console.log(index);
$(obj).css({
position:'fixed',
top: index*100//Problem here
});
}
});
};
The main problem you had there was that you set the css of the obj jquery selector, and not on the img that was in the obj selector.
In order to get to the img element you could use any of $(this) or add a second parameter to the callback function inside the $.each, which is the current element:
$.each(obj, function(index, el) {
$(el).css
Here is a complete snippet:
$(function() {
obj = $('section img');
$.each(obj, function(index) {
$(this).css({
position:'fixed',
top: index*100
});
});
});
section img {
width: 50px;
height: 50px;
border: 1px solid black;
}
section.one img {
border-color: red;
}
section.two img {
border-color: green;
}
section.three img {
border-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="one">
<img src="one.png" alt="one"/>
</section>
<section class="two">
<img src="two.png" alt="two" />
</section>
<section class="three">
<img src="three.png" alt="three" />
</section>
I have a gallery of images. I want to show a loading gif when an image is clicked. I am passing the same onclick function to all the images with their id as below:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading" style="margin-top: -65%; display: none; z-index= 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
This is my js :
function imageClicked(id) {
// alert(id);
document.getElementById("loading").style.display = ""; // to display
//alert(loading);
return true;
}
var FirstLoading = true;
function Restoresmallimage() {
if (FirstLoading) {
FirstLoading = false;
return;
}
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = Restoresmallimage;
For the first image its working fine.
But issue is when I am clicking on second image, gif is running on first image and not on the second one. How to resolve this issue? I had defined loading id in each div image.
I think the problem is you never move imagepreloader.gif. Here is my solution to have only one imagepreloader.gif for all images:
HTML:
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
CSS:
div {
display: inline-block;
position: relative;
}
#loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JavaScript:
function constructImagePreloader() {
'use strict';
var imagePreloader = document.createElement('img');
imagePreloader.setAttribute('src', 'images/imagepreloader.gif');
imagePreloader.setAttribute('alt', 'loading...');
imagePreloader.setAttribute('id', 'loading');
return imagePreloader;
}
function imageClicked(id) {
document.getElementById(id).appendChild(constructImagePreloader());
return true;
}
Tell me if it suits your needs. We could go further with code optimization but I wanted to stay close from your code for now. For instance: we could remove the image preloader from the clicked image if another image is clicked.
Try this if it will work,
<div id="smallimage1" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image1.jpeg"/>
</div>
<div id="smallimage2" onclick="imageClicked(this.id)">
<img class="model-img" src="img/model/image2.jpeg"/>
</div>
<div id="loading1" style="margin-top: -65%; display: none; z-index:9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
<div id="loading2" style="margin-top: -65%; display: none; z-index: 9999; position: relative;">
<img src="img/imagepreloader.gif" alt="loading...">
</div>
And your script will be like this;
function imageClicked(id) {
// alert(id);
var loadingId = $(id).replace('smallimage','loading');
document.getElementById(loadingId).style.display = "block"; // to display
//alert(loading);
return true;
}
I have created a simple slider
html
<div id="sldvid1" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
<hr>
<div id="sldvid2" class="slider" >
<img picnum="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png" />
<img picnum="2" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png" />
<img picnum="3" style="display:none;" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png" />
</div>
$
var timer1 = setInterval(runSlide, 1000);
var curnum = 1;
function runSlide()
{
curnum = $(".slider img:visible").attr('picnum');
//$("#sldvid1 img[picnum=" + curnum + "]").fadeOut();
if(curnum == 3){
curnum = 1;
}
else
{
curnum++;
}
// $(".slider img").hide();
//$(".slider img[picnum=" + curnum + "]").show();
$(".slider img").hide();
$(".slider img[picnum=" + curnum + "]").show();
//console.log(curnum);
}
CSS
.slider{
height:50px;
}
Demo
http://jsfiddle.net/mparvez1986/vf401e2y/
Everything is working fine, I just need some one to improve effect so that it could effect like moving from left to right, I tried with some effect, but it seems it required some css manipulation as well
Thanks
I modified your code to create a carousel where images are slid in and out. I accomplished this by animating the margin-left CSS property with jQuery. I specified a size for the .slider class and used overflow: hidden; to ensure the sliding images were not displayed outside of it.
If you wish, you can change the transition effect by changing the CSS property that is animated and ensuring that the elements are in the correct position for the animation before it begins.
You can also change the speed of the animation by changing the magic number 1000 that I've left in the calls to animate. This number is specified in milliseconds.
By the way, I should point out that while custom HTML attributes are allowed in HTML5 they should begin with data-; they are called data attributes.
jsfiddle
HTML
<div id="sldvid1" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
<hr>
<div id="sldvid2" class="slider">
<img class="active" data-slide-to="0" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail1.png"/>
<img data-slide-to="1" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail7.png"/>
<img data-slide-to="2" src="https://s3.amazonaws.com/qa.SentientPrime.media/Ecommerce/44c068f106659d396f1ea0f2401f3879/1/thumbnail14.png"/>
</div>
CSS
.slider {
position: relative;
width: 50px;
height: 50px;
overflow: hidden;
}
.slider img {
display: none;
width: 100%;
position: absolute;
}
.slider .active {
display: inline-block;
}
.slider .sliding {
display: inline-block;
}
JavaScript
var timer = setInterval(runSlide, 2000);
function runSlide() {
// Slide each slider on the page.
$(".slider").each(function (index, element) {
// Get the elements involved in the slide.
var numChildren = $(this).children().length;
var activeChild = $(this).children(".active");
var activeSlideTo = $(activeChild).attr("data-slide-to");
var nextSlideTo = (parseInt(activeSlideTo) + 1) % numChildren;
var nextChild = $(this).find("*[data-slide-to=" + nextSlideTo + "]");
// Prepare for slide.
$(activeChild).css("margin-left", "0%");
$(nextChild).css("margin-left", "-100%");
$(activeChild).addClass("sliding");
$(nextChild).addClass("sliding");
$(activeChild).removeClass("active");
// Slide using CSS margin-left.
$(activeChild).animate({"margin-left": "100%"}, 1000, function () {
$(this).removeClass("sliding");
});
$(nextChild).animate({"margin-left": "0%"}, 1000, function () {
$(this).addClass("active");
$(this).removeClass("sliding");
});
});
}
Ended with following
setInterval(function() {
$('#sldvid1 > img:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#sldvid1');
}, 3000);
i have 2 css classes , left side and right side of screen and i need to put them togheter, in these classes i have images which look like a puzzle:
By dragging image from the right side to the left side.At drop,must fit with the image from left side. I read about drag and drop but didnt find something like that :(
What i've tried?
EDIT: http://postimg.org/image/je31ptb6d/ (this is an example with my pictures.On top are images separated as classes - class="left" for ca and class="right" for nă.On bottom are images after i drop the image from right to one from left.My question is how to specify the correct drop zone to make images look like bottom one from link after i drop image from right side? )
JS/Jquery:
// shuffle function for right side only
$(document).ready(function() {
var a = $(".right > img").remove().toArray();
for (var i = a.length - 1; i >= 1; i--) {
var j = Math.floor(Math.random() * (i + 1));
var bi = a[i];
var bj = a[j];
a[i] = bj;
a[j] = bi;
}
$(".right").append(a);
});
// drag and drop
$(function() {
$( ".right img" ).draggable
({
cursor: 'move',
revert: 'invalid',
});
$( ".left img" ).droppable({
tolerance: 'fit',
});
});
HTML:
<div class="left">
<img class="piese" id="piesa1" src="images/Text_1.svg" />
<img class="piese" id="piesa2" src="images/Text_2.svg" />
<img class="piese" id="piesa3" src="images/Text_3.svg" />
<img class="piese" id="piesa4" src="images/Text_4.svg" />
</div>
<div class="right">
<img class="piese" id="piesa5" src="images/Text_5.svg" />
<img class="piese" id="piesa6" src="images/Text_6.svg" />
<img class="piese" id="piesa7" src="images/Text_7.svg" />
<img class="piese" id="piesa8" src="images/Text_8.svg" />
</div>
To solve your problem you must build a grid
and use drag drop by taking as a reference the location of the squares of the grid.
This is a simple example to give you an idea.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
#grid{
background-color: #09F;
height: 130px;
width: 390px;
position:relative;
margin:100px auto;
}
.square{
height: 128px;
width: 128px;
border:1px solid #999;
float:left;
}
#first-image{
position: absolute;
left: 0px;
}
#second-image{
position: absolute;
right: 0px;
}
</style>
</head>
<body>
<!--take two images by 120px with this class and id -->
<div id="grid">
<img class="dr" id="first-image" src="your-image.png" width="128" height="128">
<img class="dr" id="second-image" src="your-image.png" width="128" height="128">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(xx = 0; xx < 3; xx++) {
$("#grid").append($('<div class="square"></div>'));
};
$('.dr').on("dragstart", function (event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('div.square').on("dragenter dragover drop", function (event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
de=$('#'+data).detach();
var x = $(this).position().left;
var y = $(this).position().top;
de.css({'position':'absolute','top':y+'px','left':x+'px'}).appendTo($(this));
};
});
});
</script>
</body>
</html>