Develop Reference

How to do image fading with position relative?

I am trying to integrate the code from here to change image of my slide show on click (credit to cssyphus):
$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
});
});
function Forward() {
$("img:first").fadeToggle("slow", function() {
$(this).appendTo(".frame").fadeIn(800)
});
}
function Backward() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").fadeIn()
});
}
.frame {
position: relative;
left: 35%;
}
img {
position: absolute;
max-width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>
<input type="button" value="PrependTo" />
<button onclick="Forward()">Go Forward</button>
<button onclick="Backward()">Go Backward</button>
</h1>
<div class="frame">
<img src="http://placeimg.com/240/180/animals">
<img src="http://placeimg.com/240/180/nature">
<img src="http://placeimg.com/240/180/people">
<img src="http://placeimg.com/240/180/sepia">
</div>
The issue arise due to the effect depending position:absolute to stack the images on top of one another. Switching it to position:relative unstack the images and they are next to one another. Using position:absolute throws off all other elements in the code to integrate into. How can I remedy this problem?

It's a little difficult to imagine how the layout is affected by the slideshow, but from looking at your code I would try one of two things:
Remove the left: 35%; css from the .frame - I'm unsure why this is there but it will push the whole frame container of the slideshow over
.frame {
position: relative;
}
Adjust the CSS for the img so it only affects the nth-children after the first one, so they will be stacked on top of one another while the first one is inherit/relative:
img {
position: relative;
}
img:nth-child(n+2) {
position: absolute;
top: 0;
left: 0;
}

Automatic clickable image gallery using jQuery, first image fades in/out but the others don't fade in?

I have a gallery of sponsor logos that are set to fade into the next image every 4 seconds, made using jQuery and CSS. The problem is that these images must link to the appropriate webpage when clicked. The code works completely fine when the image tags are NOT in link tags, but as soon as you add a link around the image, the first image fades in, fades out after 4 seconds, and then the next image never fades in, so the whole section basically diappears. Is there a way around this?
jQuery code:
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
CSS code:
.img {
position: absolute;
width: 20%;
margin-left: 40%;
}
.fadein {
position: relative;
}
.fadein img {
top: 0;
}
HTML code:
<div class="fadein">
<img class="img" alt="" src="ex1"/>
<img class="img" alt="" src="ex2"/>
<img class="img" alt="" src="ex3"/>
</div>
URL: http://example.samileier.com
Basically, I want the images to fade into one another every 4 or so seconds, but I also want them to be clickable links to other websites.

I think you need to focus on fading the 'a' tag instead of the 'img'.
I slightly modified your code.
<script>
$(function () {
$('.fadein a:gt(0)').hide();
setInterval(function () {
$('.fadein a:first-child').fadeOut().next('a').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
<style>
body {
background-color: black;
}
.image-container {
width: 20%;
margin-left: 42%;
}
.fadein {
position: relative;
}
.fadein a {
display: block;
}
.fadein img {
top: 0;
position: absolute;
width: 20%;
margin-left: 40%;
}
</style>

Preloaded images flash at different rates

I'm calling images from a folder at random and putting them in HTML img tags using PHPs glob function.
I'm then using JS to read the URLs and flip the CSS background image of div#wrapper, 300ms for each image. The images should be preloaded as they have HTML img tags. They are being hidden from the user using the following CSS (which should not stop preloading as "display: none" does):
.visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
Nonetheless I'm experiencing the images flashing inconsistently / at different rates. It seems that larger file size images cause this to happen, but the images should be preloaded so I'm not sure why this is occurring.
My JS looks like this:
var slides = [];
$('.slide').each(function(index){
slides.push($(this).attr('id'));
});
var slide = 0;
function changeImage(){
if (slide < 10){
var currentSlide = $("#" + slides[slide]);
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-image', 'url("' + currentSlide.attr('src') + '")');
slide++
} else {
$('#headline').removeClass('visuallyhidden');
$('#wrapper').css('background-image', '');
$('#wrapper').css('background-color', '#ef3308');
}
}
setInterval(changeImage, 300);
The site is http://robertirish.com.
Is there a better way to do this / can anyone explain why it's happening?

I'm going to guess it's a loading issue: either that CSS is interfering with preload or else it's being treated differently because you're loading it into the background of another element rather than using the img that you preloaded. Instead, I would load all the images inside the div, absolute-positioned on top of each other, and then just remove them one by one:
CSS:
#wrapper{
position: relative;
}
#wrapper img{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
HTML:
<div id="wrapper">
<img src="image1.png">
<img src="image2.png">
<!--etc-->
</div>
JS:
$(document).on('ready', function(){
var images = [];
$("img", "#wrapper").each(function(){
images.push(this);
});
var timer = setInterval(function(){
if (images.length)
$(images.pop()).remove();
else
clearInterval(timer);
}, 300);
});

jquery increase/decrease image contrast on scroll

This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>

There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.

$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.

Jquery motion blur

I am working for a company and converting flash ad banners in html5.
I need to convert flash image which slides in from the left and at the same time it performs motion blur effect just like a windy effect.
I have converted slide in image but I am not sure how to add a windy effect.
Here is the car image I want to copy and this is my code jsfiddle
Thanks in advance.
HTML
<div id = "wrapper" >
<div id="mainContainer">
<div id="text">
<img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
</div>
</div>
</div>
CSS
#wrapper {
left: 50px;
top: 50px;
width: 300px;
height:250px;
position: absolute;
}
#mainContainer {
background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
width:300px;
height:250px;
overflow: hidden;
position: absolute;
}
#Image_Car {
position:absolute;
overflow: hidden;
margin:60px 8px;
left: -120px;
}
jQuery
$(document).ready(function () {
bannerAnimation();
});
function bannerAnimation() {
//Jquery Animation
$("#Image_Car").animate({
left: "30"
}, 500, function () {
$("#Image_Car").animate({
left: "10"
}, 200);
});
}

Jquery is not going to help you create motion blur unless you use a canvas, which nearly no one use for creating ads,
or,
you can create multiple instance of the images and place in same place, then animate each with slight time interval and opacity.

This is very good plugin for you:
DEMO
plugin