I needed to create a function that changes and animates the background image, to give it a cool fade-in effect when triggered. However I have run into a weird issue. So as for my function below, it works, in the sense that it changes the background image when run. But it does not animate. It just instantly changes the background image. I have tried messing with the "transition" property, using background, background-image, and others, but to no avail. Can someone help me understand why the animation part is failing to trigger?
function postBackgroundImage(url){
var bg = dom.el("topLayer");
bg.src = url;
bg.style.backgroundImage = "url("+bg.src+")";
bg.style.transition = "all 2s linear 1s";
}
You can use a Jquery Plugin
http://jquery.malsup.com/cycle/
include library
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
For fade effect use
$('.pics').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
html
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
css
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
Related
Im trying to create a slider that has the main image about 60% of the screen and then 20% of the previous and next image next to it. Here is an example http://www.qantumthemes.xyz/onair2/wpdemo/
Im trying to use slick slider and the example here https://kenwheeler.github.io/slick/ under Slider Syncing where it has the option centerMode. The problem is that I can't seem to find a way to set the width of the previous and next images.
Here is the code I have so far with slick slider
.slider {
width: 50%;
margin: 100px auto;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}
<section class="center slider">
<div>
<img src="1.jpg">
</div>
<div>
<img src="2.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="4.jpg">
</div>
</section>
I created this fiddle, which works they way you're asking https://jsfiddle.net/uqy8L69g/.
Main fix was to initialize variableWidth to true and set width for the slides:
.slick-slide {
width: 2em;
}
.slick-active {
width: 5.5em;
border: .1em solid black;
}
The problem is the weird move it does while changing slides. This happens because of centerMode. It implements padding only after the sliding was done. To fix that, I would play with transitions using onAfterChange (you can read about it here: https://github.com/kenwheeler/slick/issues/1005).
I am using a jQuery plugin called Slideshowify. Unfortunately, it doesn't come with many options or functions, so I have been forced to attempt to create my own pause and play with mouse enter/leave.
As seen below, I have managed to stop the animating simply using .stop() on mouseenter, but I have not yet managed to find a way to play the animation from its current state after mouseleave.
How can I achieve this?
HTML:
<div id="slideshow">
<img src="http://lorempixel.com/output/city-h-c-320-500-2.jpg" />
<img src="http://lorempixel.com/output/food-h-c-320-500-9.jpg" />
<img src="http://lorempixel.com/output/abstract-h-c-320-500-10.jpg" />
</div>
CSS:
#slideshow {
background-color: #ffffff;
position: relative;
width: 320px;
height: 320px;
border: 1px solid #ffffff;
z-index: 10;
}
JS:
$('#slideshow img').slideshowify({
parentEl: '#slideshow'
});
$("#slideshow").on('mouseenter', function () {
$(this).find('div > img').stop(true, false);
});
WORKING DEMO
I would like to ask you about the way to reuse the code below for multiple images:
http://jsfiddle.net/a8c9P/
How to avoid redundancy in the CSS code?
An updated example: http://jsfiddle.net/a8c9P/156
$("#imgSmall").click(function() {
$("#imgBig").attr("src", "http://www.freeimageslive.com/galleries/sports/music/pics/musical_notes.jpg");
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
http://jsfiddle.net/a8c9P/157/
HTML
<div id="overlay"></div>
<div id="overlayContent">
<img id="imgBig" src="" alt="" width="400" />
</div>
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
JS
$(".imgSmall").click(function(){
$("#imgBig").attr("src",$(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
#overlayContent{
position: fixed;
width: 100%;
top: 100px;
text-align: center;
display: none;
overflow: hidden;
z-index: 100;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall{
cursor: pointer;
}
First - if you are going to use an id it should always be unique. That in mind, any time you want particular behavior that you want to apply to many elements in a "jQuery" manner - this is a perfect case to use a class instead of an id. An example of this:
$(".myClass").click(function(){
$("#imgBig").attr("src", $(this).attr("src"));
$("#overlay").show();
$("#overlayContent").show();
});
You'll note that I use this which is a reference to the exact item that was clicked! Now you don't have to worry about having many elements of the same type!
SEE THE FIDDLE
What you need is multiple IDs and an HTML Class to handle the CSS. Each element can only have one ID, but it can inherit multiple classes. Define .imgSmall and .imgBig classes, use those to handle your CSS, and then use whatever ID scheme suits you for the click detection.
I would recommend something like img1, img1, img2 and bigimg1, bigimg2, bigimg3, because that would let you generate all of your html in a loop.
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
I have a big grid of images. When a user mouseovers an image I want the image to tint blue 0000FF. Is there a way to do this in JS or jquery? Ideally, I wouldn't have to apply a class to each image. This treatment should affect all images on the screen.
After searching the forums here and elsewhere I learned that some folks use a div over the image that has a color and opacity, but how would I apply that to all img?
Another thing I keep seeing is paintbrushJS and pixastic but I don't know how to make those work for this purpose.
Here's the page I'm working on:
http://www.rollinleonard.com/elements/
EDIT: the images need to be be clickable so the div can't obstruct the linked img. Is there a way to click through the div or put the div below or something? Some solutions offered don't use a div but I can't figure them out.
Thanks!
Rollin
This is how you're gonna want to do it: http://jsfiddle.net/ztKJB/1/
Javascript / jQuery:
$overlay = $('#overlay');
$('img').bind('mouseenter', function () {
$this = $(this);
if ($this.not('.over')) {
$this.addClass('over');
$overlay.css({
width : $this.css('width'),
height : $this.css('height'),
top : $this.offset().top + 'px',
left : $this.offset().left + 'px',
}).show();
}
}).bind('mouseout', function () {
$(this).removeClass('over');
});
CSS:
#overlay {
display: block;
position: absolute;
background-color: rgba(0, 0, 255, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
HTML:
<div id="overlay"></div>
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150"
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">
The idea of using a div over the image would work. You can generate the div on-the-fly as needed (or generate a hidden div to reuse throughout the page), and position it over the image during the onmouseover event:
$('img').mouseover(function() {
// generate a div
// position over current image
});
Append a span inside each anchor, and adjust it's opacity on hover:
<script>
$(function() {
$('a').each(function() {
$(this).appendChild('<span class="overlay" />');
});
});
</script>
<style>
a {
position: relative;
}
a .overlay {
background-color: #00f;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
}
a:hover .overlay {
opacity: 0.4; /* adjust to suit */
}
</style>
Note: you'll need to adjust your styles so the anchors are being floated rather than the images.
If you wanted a fade in/out, you could either use CSS3 transitions or hide the span initially and use a jQuery mouseover event to fade it in:
$('a').each(function() {
$(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
$(this).find('.overlay').fadeIn(500);
}, function() {
$(this).find('.overlay').fadeOut(1000);
});
});
This jquery plugin should do the thing you asked pretty well. (tancolor.js)
$("#myImageID").tancolor({mode: "blue"});
There's an interactive demo. You can play around with it.
Check out the documentation on the usage, it is pretty simple. docs