We Keep Coding

How do I change the color of all images on scroll?

I have a site that I want to have images that change from black and white to color when the viewer scrolls. The images are originally in color but I used a css filter to create the grayscale effect.
How can I achieve this effect on scroll? I know how to create the effect when the viewer hovers over the image but I want to make it so that it changes on scroll.
Here is my code for the hover effect:
.contact
{
filter: grayscale(100%);
-webkit-filter:grayscale(100%);
}
.contact:hover{
filter: grayscale(0);
-webkit-filter:grayscale(0);
}
Thank you for your help!

Define a class for black & white and another for color :
.contact {
filter: grayscale(100%);
-webkit-filter:grayscale(100%);*
}
.contact:hover, .contact-color {
filter: grayscale(0);
-webkit-filter:grayscale(0);
}
Then add a listener on window :
var images = document.getElementsByClassName('contact');
var changeFrom = 500; // from which amount of scroll do you want the effect to appear ?
window.addEventListener('scroll', function() {
if (window.scrollY >= changeFrom ) {
[].forEach.call(images, function(image) {
image.classList.add('contact-color');
});
}
else {
[].forEach.call(images, function(image) {
image.classList.remove('contact-color');
});
}
});
Color will will change when the the defined amount of vertical scrolling is reached and will revert if you scroll up. I don't know if it's exactly what you want but you may easily adapt it depending on your needs.

Not sure if I understood correctly, but I assumed that you wanted your images to turn b/w while scrolling. Independent on where you are on the page.
Javascript has a onScroll event, but that fires every time a scroll occurs, so the first time you get this event, change to b/w and change the color back if a scroll event hasn't been fired in half a second. I used setTimeout() to do this with a delay.
Heres a fiddle that shows the concept: https://jsfiddle.net/rzqcwzrh/107/
$("#idOfUl").on( 'scroll', function(){
if(!$( "#idOfUl" ).hasClass( "red" ))
$("#idOfUl").addClass("red");
setTimeout(function(){
$("#idOfUl").removeClass("red");
}, 500);
});

Jquery always repeat functions

I have these 2 functions to create opacity effect
<script>
function trans(id)
{
$(".pris_"+id).stop().fadeOut(1000);
$(".pris_"+id).css({ opacity: 0.1});
stop();
}
function trans_reverse(id)
{
$(".pris_"+id).stop().fadeIn(1000);
$(".pris_"+id).css({ opacity: 0.8});
stop();
}
</script>
<div id="productos_image_soon" class="pris_1" onmouseover="trans('1');"onmouseout="trans_reverse('1');">
Product in a few time
</div>
Into the div i call each function , the problem is when i put mouseover the div all time and in recursive mode the second function execute and after the first function and continue executed , the effect is when mouseover the opacity low and when mouseout opacity grow
Working ..... here jsfiddle.net/dSesq/
I don´t know why this happens, I've tried the stop() function but the problem continues

It makes no sense why you are setting the opacity of the element after fading it in. Use fadeTo!
function trans(id, opacity) {
$(".pris_"+id).stop().fadeTo( 1000, opacity);
}
And you should probably use mouseenter and mouseleave. Also you are going to get weird results having the mouse over an element that is going to disappear.
Your code could be written as
$(".trigger").on("mouseover mouseout", function(evt){
var opacity = evt.type=="mouseover" ? 1 : .8;
$(this).stop().fadeTo(1000, opacity);
})

Javascript slide effect onclick

I'd like to add a slide & fade effect to a DIV, with purely Javascript, using "onclick".
The code is here: http://jsfiddle.net/TCUd5/
The DIV that has to slide has id="pulldown_contents_wrapper".
This DIV is contained in a SPAN, that also triggers it:
<span onclick="toggleUpdatesPulldown(event, this, '4');" style="display: inline-block;" class="updates_pulldown" >
<div class="pulldown_contents_wrapper" id="pulldown_contents_wrapper">
And I think the JS code that controls the SPAN onclick is:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
If it is not possible to make it with pure JS, do you have an idea how could I do it with Mootools? (*I'd like to use only pure JS or the Mootols framework).
I have tried to implement the code from: why javascript onclick div slide not working? but with no results.
Thanks a lot.
I have managed to make it with Mootools, but I can't figure it out how to add a slide & fade effect, and a delay on mouseout
window.addEvent('domready', function() {
$('updates_pulldown').addEvents({
mouseenter: function(){
$('updates_pulldown').removeClass('updates_pulldown').addClass('updates_pulldown_active')
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
physics: 'pow:in:out',
transition: Fx.Transitions.Bounce.easeOut // This could have been also 'bounce:out'
}).show();
},
mouseleave: function(){
$('pulldown_contents_wrapper').set('tween', {
duration: 1000,
delay: 1000,
}).hide();
$('updates_pulldown').removeClass('updates_pulldown_active').addClass('updates_pulldown')
},
});
});
var toggleUpdatesPulldown = function(event, element, user_id) {
showNotifications();
}
Any idea?

jQuery is a lot easier, but with pure javascript you can do it.
In the CSS you'll need to use transitions
#thing { position:relative;
top: 0px;
opacity: 0.8;
-moz-transition: top 1s linear, opacity 1s linear;
-webkit-transition: top 1s linear, opacity 1s linear;
}
then in the javascript when you change the position of the element, it should change via the css transitions.
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.style.top = someValue; //something like '100px' will slide it down 100px
element.style.opacity = '1.0'; //will fade the content in from 0.8 opacity to 1.0
element.className= 'updates_pulldown_active';
showNotifications();
EDIT - provided jQuery code
call the jQuery library, most easily done from the google hosting
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
make the hover function
$(document).ready(function() {
$('.updates_pulldown').hover( //first function is mouseon, second is mouseout
function() {
$(this).animate({top: '50px'}).animate({opacity: '1.0'});
},
function() { //delay 1000 milliseconds, animate both position and opacity
$(this).delay(1000).animate({top: '0px'}).animate({opacity: '0.5'});
}
)
})
the function timing will be the same as whatever you set it to in the css with transition tags. using 'this' instead of the class name again makes sure that the effect only occurs on the specific instance of the class that is hovered over. im not sure if this animation is exactly what you were asking for, but if i understand the question correctly then the main functionality will work for you. just change the numbers and such to fit your needs.

Issue with jquery fadein

I have a piece of code here which it works but not sure why my fadein and fadeout doesn't work for the body,
If you think what the issue i'm having please let me know thanks
<script type="text/javascript">
$(window).load(function() {
var lastSlide = "";
$('#slider').nivoSlider({
effect: 'random',
directionNavHide : true,
slices : 15,
animSpeed : 500,
pauseTime : 6000,
controlNav : false,
pauseOnHover : true,
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
beforeChange: function(){
if(lastSlide == "images/header_used.jpg") { //use the bg image of the slide that comes before the newslide
$("body").attr("style","background: #000 url(images/bg.jpg) top center no-repeat;").fadeIn("slow");
} else {
$("body").attr("style","background: #ADADAD url(images/bgnd_grad.jpg) repeat-x;").fadeOut("slow");
}
},
afterChange: function() {
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src");
}
});
});
</script>

While it may solve your mission with the body background. i would instead have used addClass and removeClass. You are manipulating the style attribute which also show/hide uses it.
I have no way to test it but what happens if you switch the fades to show() and hide(), just to determine if delay is a factor.. :)

It my come by the fact that "lastSlide" variable could store multiple object (the one from img and the one from visible link).
t = $(this).children("a:visible");
lastSlide = $("img", t).attr("src"); //could store multiple source.
This make comparation a little bit tricker and could create bug.
Plus the fact that you use the worst way to style your body. As other says, use class or .css jQuery function (http://api.jquery.com/css/).
Hope this help

fadein and fadeout work for body,absolutely.
as Reflective said, it should be
$("body").css("background","#000 url(images/bg.jpg) top center no-repeat;").fadeOut("slow")
if still doesn't work, you may should look into your nivoSlider function

Using CSS3 to make a smooth slow scroll

Basically I have a banner of images which are to scroll from left to right. I have it working fine with jQuery (code pasted below) however it can be very jittery and the client wants it smoother. So after some research the best way is to use CSS3 (probably should have started here). I haven't used much CSS3 other than the basics like border-radius so had to read up. After seeing some examples I was able to try out making the scroll however I couldn't get it to work with jQuery as well.
The intended effect:
scroll slowly from right to left 'forever'
when mouse is over it, it stops scrolling
I do this with the following jQuery:
$(document).ready(function() {
var $scrollMe = $('.ScrollMe');
$scrollMe.hover(stopBannerAnimation)
$scrollMe.mouseout(startBannerAnimation)
function stopBannerAnimation()
{
$(this).stop();
}
function startBannerAnimation()
{
/*if (Modernizr.csstransitions)
{
$scrollMe.css('left', '{xen:calc '{$scrollerWidth} * 100'}px');
}
else*/
{
$scrollMe.animate(
{left: -{$scrollerWidth}},
{xen:calc '{$scrollerWidth} * 60'},
'linear',
function(){
if ($(this).css('left') == '{$scrollerWidth}px')
{
$(this).css('left', 0);
startBannerAnimation();
}
}
);
}
}
startBannerAnimation();
$('.ScrollMe ol').clone().appendTo('.ScrollMe');
});
Can someone help me get this same functionality while using CSS3 to handle the actual scrolling so it is smoother (in theory)?

This is how I'd do it, using 5 seconds for the animation speed:
Step 1: write your CSS3 transition class
.ScrollMe{
-webkit-transition:left 5s ease; // here the animation is set on 5 seconds
-moz-transition:left 5s ease; // adjust to whatever value you want
-o-transition:left 5s ease;
transition:left 5s ease;}
}
Step 2: set up the jquery to toggle the left position
function DoAnimation () {
var $scrollMe = $('.ScrollMe');
if ($scrollMe.offset().left === 0) {
// I imagine you calculate $scrollerWidth elsewhere in your code??
$scrollMe.css('left', $scrollerWidth);
} else {
$scrollMe.css('left', 0);
}
setTimeout(function () {
if (LaunchAnimation === true) { DoAnimation(); }
}, 5000); // here also assuming 5 seconds; change as needed
}
Step 3: control animation start/stop
var LaunchAnimation = true;
$(document).ready(function() {
$('.ScrollMe').mouseover(function () {
//this stops the div from moving
if (LaunchAnimation === true) {
$(this).css('left', $(this).offset().left);
LaunchAnimation = false;
}
});
$('.ScrollMe').mouseleave(function() {
DoAnimation();
LaunchAnimation = true;
});
}
This way, you let the CSS rendering engine of the browser control the speed and movement of the div for smoothness and you use jquery only as the trigger mechanism.
Hope this helps.