This is the jquery
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).animate({'transform' : 'scale(0.8)'}, 'slow');
});
layer.on('mouseleave', function() {
$(this).animate({'transform' : 'scale(1)' }, 1000);
});
});
This is the html
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<%= image_tag "233HHH.jpg", class: 'img-profile' %>
</div>
</div>
</div>
It's in rails hence the image_tag.. but I don't understand why nothing is happening when mouse hovers over.
transform is not a property that can be animated using jQuery.
You can use transition to set the animation properties like
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
layer.on('mouseenter', function() {
$(this).css({
'transform': 'scale(0.8)'
});
});
layer.on('mouseleave', function() {
$(this).css({
'transform': 'scale(1)'
});
});
});
.project-layer1 {
transition: all ease 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
There is no need to use scripting for this effect, you can just use the :hover css rule
jQuery(document).on("ready page:load", function() {
var img = $('.img-profile')
var layer = $('.project-layer1')
});
.project-layer1 {
transition: all ease 1s;
}
.project-layer1:hover {
transform: scale(0.8);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-list">
<div class="project-list-container">
<div class="project-layer1">
<div class="project-desc">Tutor U</div>
<div class="project-logo">
<img src="//placehold.it/64" />
</div>
</div>
</div>
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'm trying to create an image slideshow with setInterval which starts playing when the mouse is over .project-img and pauses when the mouse leaves .project-img. The problem i'm having is calling clear interval on to pause the slideshow when the mouse leaves, I'm currently receiving the error:
Uncaught ReferenceError: cycle is not defined
Where am I going wrong?
var Image = {
init: function() {
Image.setupImages();
Image.bindEvents();
},
bindEvents: function() {
$('.project-img').hover(function() {
var hovered = $(this);
var thumbnailIndex = 0
var thumbnailArray = hovered.children()
console.log(thumbnailArray);
var cycle = setInterval(function(){
thumbnailIndex++
if (thumbnailIndex === thumbnailArray.length) {
thumbnailIndex = 0;
thumbnailArray.removeClass('active');
thumbnailArray.eq(0).addClass('active');
} else {
var $visible = thumbnailArray.eq(thumbnailIndex);
thumbnailArray.removeClass('active');
$visible.addClass('active');
}
}, 700);
}, function() {
clearInterval(cycle);
});
},
setupImages: function() {
var projectImage = $('.project-img');
projectImage.each(function(project) {
$(this).find('.project-thumbnail:eq(0)').addClass('active');
});
}
}
$(document).ready(function() {
Image.init();
});
.project-thumbnail {
visibility: hidden;
display: none;
}
.active {
visibility: visible;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
</div>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
</div>
This is a scope issue, you have defined cycle within a function, so it can't leave. Put var cycle above var Image and your problems will be solved! Alternatively if you wanted to keep it scoped inside the Image var, you can replace cycle with Image.cycle and that will also work.
The variable cycle is in a different scope. Instead of using hover use each, declaring the cycle variable in an outer scope of hover like so:
var Image = {
init: function() {
Image.setupImages();
Image.bindEvents();
},
bindEvents: function() {
$('.project-img').each(function() {
var hovered = $(this);
var cycle;
hovered.hover(function() {
var thumbnailIndex = 0;
var thumbnailArray = hovered.children();
cycle = setInterval(function() {
thumbnailIndex++
if (thumbnailIndex === thumbnailArray.length) {
thumbnailIndex = 0;
thumbnailArray.removeClass('active');
thumbnailArray.eq(0).addClass('active');
} else {
var $visible = thumbnailArray.eq(thumbnailIndex);
thumbnailArray.removeClass('active');
$visible.addClass('active');
}
}, 700);
}, function() {
clearInterval(cycle);
});
});
},
setupImages: function() {
var projectImage = $('.project-img');
projectImage.each(function(project) {
$(this).find('.project-thumbnail:eq(0)').addClass('active');
});
}
}
$(document).ready(function() {
Image.init();
});
.project-thumbnail {
visibility: hidden;
display: none;
}
.active {
visibility: visible;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
</div>
<div class="project-img">
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/ffffff/000000">
</div>
<div class="project-thumbnail">
<img src="http://via.placeholder.com/250/000000">
</div>
</div>
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>
I have this sort of html:
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= #website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= #website.background_image.present? ? #website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<i class="icon-angle-right"></i><span>Start Tour</span>
</div>
</div>
</section>
</div>
Now, here I want to capture div class for the div I will click on.
the function I am trying is but it is not working as expected. It keep giving only first div class:
$(document).ready(function () {
$('.outerDiv').click(function () {
alert($(this).attr('class'));
});
});
The following can get the class name of the exact element on which the click happened.
$(document).ready(function () {
$('.outerDiv').click(function (e) {
alert(e.target.className);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= #website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= #website.background_image.present? ? #website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<i class="icon-angle-right"></i><span>Start Tour</span>
</div>
</div>
</section>
</div>
The problem is about the selector. And opening the selector you have to stop the propagation to not have all parents firing the same event.
Try this:
<div style="animation-duration: 1.5s; opacity: 1;" id="wrapper" class="clearfix website outerDiv" data-url="/websites/<%= #website.id %>">
<section id="slider" class="slider-parallax innerDiv" style="background: transparent url(<%= #website.background_image.present? ? #website.background_image : (image_path current_user.website.theme.image_name) %>) no-repeat scroll 0% 0% / cover ; height: 600px; transform: translate(0px, 0px);" data-height-lg="600" data-height-md="500" data-height-sm="400" data-height-xs="300" data-height-xxs="250">
<div class="contentDiv" id="clearfix">
<div style="margin-top: 5px; width: 170px; height: 170px;" id="imageEditor" class="imageEditor" data-attr="logo" id="website-logo">
mycontent
</div>
<div style="position: absolute; top: 50%; width: 100%; margin-top: -81px; opacity: 1.77778;" class="website-title vertical-middle dark center">
<div class="heading-block nobottommargin center">
<div contenteditable="true" class="textEditor" data-attr="heading" id="website-title">
mycontent
</div>
<div class="hidden-xs textEditor" contenteditable="true" data-attr="description" id="website-desc">mycontent</div>
</div>
<i class="icon-angle-right"></i><span>Start Tour</span>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.outerDiv, .outerDiv div').click(function (e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
</script>
$(document).ready(function () {
$('.outerDiv ').click(function (e) {
console.log(e.target.className);
});
});
Would work like a charm, plus its better that you use console.log rather than alert to view things
Try this:
$(document).ready(function () {
$('.outerDiv').click(function () {
var className = $(this).attr('class');
alert(className);
});
});
It will alert the class of the div on which the event has been attached to. You will need to bind the events for all the divs you need the class for. And in case you need the class for the parent div, just refer it within the bound function.
If you're looking for a specific class present or not then you can use ".hasClass('className')"
If you want all the classes on the div
$(document).ready(function () {
$('.outerDiv').click(function () {
var className = this.className;
alert(className);
});
});
This is a native JS method, not jquery.
If you want that, on clicking of any div from your page will alert class name for that div, than you Need to bind .click() event on all of div present in your page.
Also prevent your click event to propagate to parent div, so that it will show only current div click class name.
Try this code :
$(document).ready(function () {
$('div').on('click', function(e) {
alert($(this).attr('class'));
e.stopPropagation();
});
});
Here is Jsfiddle Demo
jQuery(document).ready(function () {
$('div').on('click', function(e) {
console.log(e.target.className);
e.stopPropagation();
});
});
I've setup a jQuery function that changes the body background colour when a certain div comes into view, e.g. the body background colour is black, when #block-three (that contains black text), the body background colour changes to white, and changes back when this goes out of view. This works fine, it's just very sudden though, I'm looking for a much smoother transition between background colours, fading between colours as you scroll (if possible).
jsFiddle demo: http://jsfiddle.net/neal_fletcher/TB53d/
HTML:
<div id="block-one" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
<div class="inner-block"></div>
</div>
<div id="block-two" class="block">
<div class="inner-block">Test</div>
</div>
<div id="block-three" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
</div>
<div id="block-four" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
<div class="inner-block"></div>
</div>
<div id="block-five" class="block">
<div class="inner-block">Test</div>
<div class="inner-block"></div>
<div class="inner-block"></div>
</div>
jQuery:
var blockHeight = [];
$(".block").each(function () {
blockHeight.push($(this).height());
});
function hoverCurrentItem() {
var sIndex = 0;
var totalHeight = 0;
var scrolled = $(window).scrollTop();
for (var i in blockHeight) {
totalHeight += blockHeight[i];
if (totalHeight > scrolled) {
break;
} else {
sIndex++;
}
}
var $sItem = $(".block").eq(sIndex);
if (!$sItem.hasClass("selected")) {
$(".selected").removeClass("selected");
$sItem.addClass("selected");
}
if ($("#block-three").hasClass("selected")) {
$("body").css("background-color", "white");
} else {
$("body").css("background-color", "black");
}
}
hoverCurrentItem();
$(window).scroll(function (e) {
hoverCurrentItem()
});
Any suggestions would be greatly appreciated!
You could use transition with CSS:
body {
background-color: black;
transition:all 1s;
}
The Demo Fiddle