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
Related
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;
}
Hi there I need to an interactive element using a large image. This image sized 1000x1000 pixel with simple imagery will contain several questions with yes or no. What I want to do is place this image within a small div (say 500x300) with hidden overflow and add hotspots on the image for the yes/no option. What I want is when the user clicks yes, then the hotspot link pans to specific x/y coordinates of the same large image. Viewer will only see within the 500x300 window. So on and so forth. Is this possible? It seems so simple yet only option I can find is the pan by mouse option or iframe option with complicated divs and anchors. I'm not an expert in java/jquery but would love to find a script that is adaptable. Please help!
This sounded fun so I made a custom solution real quick. Demo here: jsBin
It's heavily reliant on the proper CSS, so check that in the bin, but here's the JS part:
var choice = document.querySelectorAll('.choice'),
image = document.getElementById('image')
for ( var i=0; i<choice.length; i++) {
choice[i].addEventListener('click', function (event) {
var x = this.dataset['x'],
y = this.dataset['y'];
image.style.top = '-'+y+'px';
image.style.left = '-'+x+'px';
})
}
Use css transitions for animation. Set up the positions you want the buttons to move the image around to in the image using a series of javascript objects. Then, set up your anchors, text, etc using absolute positioning on top of the image inside of a div container. Finally, add a click action in jQuery to assign your different positions to the top and left css of that container.
The end result, then, will be that you click an anchor, the left and top positions are assigned to the container via css in jQuery, and the transitions will slide the image around with the anchors.
I set up a fiddle here.
Here's the html from the fiddle:
<div id="window">
<div id="container">
<img src="http://upload.wikimedia.org/wikipedia/en/1/1f/Kill_The_Lights_1000x1000.jpg" id="image">
<ul>
<li><a id="city" href="#">City</a></li>
<li><a id="bottom" href="#">Bottom</a></li>
</ul>
</div>
</div>
And the CSS:
#window {
width:500px;
height:300px;
overflow:hidden;
position:relative;
}
#window a {
position: absolute;
z-index: 2;
display: block;
padding: 10px;
background: rgba(255,255,255,.5);
}
#city {
top: 20px;
left: 20px;
}
#bottom {
top: 220px;
left: 220px;
}
#container {
-webkit-transition:left 2s, top 2s, -webkit-transform 2s;
transition:left 2s, top 2s, transform 2s;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
Here's some javascript to give an example of setting up the positions as objects.
var city = {
top: -200,
left: -200
};
var bottom = {
top: -700,
left: -100
}
$('a').click(function() {
var t = this.id;
var c = $('#container');
if (typeof eval(t) !== 'undefined') {
c.css({
'top': eval(t).top,
'left': eval(t).left
});
}
});
I've just made a Fiddle with a demo image from where you could proceed.
HTML:
<div class="imgHolder">
<div class="hotspot one">Click</div>
<img src="image.jpg" />
</div>
CSS:
.imgHolder {
overflow:hidden;
width:300px;
height:300px;
position:relative;
}
.hotspot.one {
position:absolute;
top:10px;
padding:2px;
background-color:#fff;
left:10px;
}
.hotspot:hover {
cursor:pointer;
}
img {
position:relative;
z-index:-1;
}
jQuery:
$(".hotspot").on("click", function () {
$("img").animate({
"right": "+=100px"
});
});
For reference: http://api.jquery.com/animate/
You could e.g. fade hotspots in and out on specific positions and use animate() to move to the next hotspot.
I have to add to an html page an intro animation. So I need that the first thing visible when loading the page is the gif at full screen (it takes about 2 seconds), then I have to fadeout the gif and fadein the html page. Can you help me?
My webpage is contained in a div like this:
<body>
<div id="site">
<div id="menu">
...
</div>
<div id="content">
...
</div>
</div>
</body>
What is contained in "site" must appear - fading - after the gif intro has played and ended.
This is what I tried first:
<script>
$(window).ready(function() {
$('#intro').css('visibility','visible').hide().delay(3000).fadeIn(300);
$('#site').css('visibility','visible');
});
</script>
but I think it is not the right way.
the best way is to use css animations. it works without jquery and directly on the gif (no div needed)
the gif must have:
#keyframes customanim
{
0% {values;}
100% {values;}
}
#-webkit-keyframes customanim /* Safari and Chrome */
{
0% {css-values;}
100% {more-values;}
}
.animationclass {
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
animation: customanim 3s;
-webkit-animation: customanim 5s;
-webkit-animation-fill-mode: forwards;
}
make sure you use "-webkit-animation-fill-mode: forwards" so the gif remains hidden after animation else the gif would return to its original state.
to play the animation again just execute this line in js:
document.getElementById('objecttobeanimated').className ='animationclass';
Link to W3C:
http://www.w3schools.com/css3/css3_animations.asp
hope i could help you
If it was me I'd put my gif in a DIV with and id on it outside of the site. Then using jQuery something like this:-
var timer = 0; //setting this up as global
$(document).ready( function () {
$("#site").hide(); // you could have the site as display:none in css instead of this line.
timer = setInterval( showSite , 2000 ) // here's your 2 seconds delay
});
function showSite() {
clearInterval(timer);
$("#myGIFdiv").fadeOut();
$("#site").fadeIn();
}
I'd suggest a longer delay, as you don't know how long your gif will take to load ... look up preloading etc to find out more about that. This is a really crude example to get you started.
Here is a solution:
JS:
$(window).load(function(){
$("#preloader-anim").fadeOut(500);$("#preloader").delay(500).fadeOut(500);
});
CSS:
.preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; z-index: 99999999; }
.preloader-anim { position: absolute; top: 50%; left: 50%; margin-top: -16px; margin-left: -16px; }
HTML:
<div id="preloader" class="preloader"><div id="preloader-anim" class="preloader-anim"><img src="http://www.iec.ch/img/loading_sliders_2.gif" /></div></div>
How it works:
A div id="preloader" is showed until the page is fully loaded. Then, fades out consecutively the loader.gif, and the div id="preloader".
Note: For illustration purposes I have used the first loading gif I found. It is not recommended to use hotlinking.
What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!
You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>
You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}
I want to enable drag-and-drop behaviour on my Web application. I have an image I want to drag. The image is behind another one that has transparent sections so that you can see the image beneath it. I do not want to change the order of the images. My thinking is I should use another layer on top of both images that is transparent and use it as a proxy to transfer events to the image I want to drag. jQuery UI's draggable function will not allow me to transfer the events in real-time i.e. I cannot hook into what it is doing while the drag is taking place, only when it is completed.
Is there a JavaScript library or jQuery plugin that will allow me to enable drag-and-drop on an element and have it transfer those events to another element in real-time?
Maybe I don't understand what you are trying to accomplish, but you should be able to drag and drop overlapping images without any trouble (demo).
Just wrap both images in a div and then make the div draggable:
CSS (no need to make .dragme position relative, because it is done in the draggable script)
.dragme img {
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="dragme">
<img src="image1.gif">
<img src="image2.gif">
</div>
Script
$(".dragme").draggable();
I updated the demo, this isn't pretty and there might be a better way, but basically this puts an invisible overlay over the frame, then positions the image while the overlay is being dragged.
CSS
#draggable, #droppable {
width: 450px;
height: 250px;
padding: 0.5em;
margin: 10px;
background: #ddd;
color:#000;
}
.dragme {
position: relative;
width: 100px;
padding: 5px;
}
.dragme img {
position: absolute;
top: 55px;
left: 30px;
}
.demo {
width: 500px;
}
.border {
position: absolute;
top: 75px;
left: 30px;
z-index: 1;
}
HTML
<div class="demo">
<div class="border">
<img src="http://www.imageuploading.net/image/thumbs/large/border-564.png">
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme">
<img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
</div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script (The demo uses $(document).ready because jsFiddle doesn't like $(window).load)
$(window).load(function(){
// cycle through draggable divs (in case there are more than one)
$(".dragme").each(function(){
var img = $(this).find('img');
var pos = img.position();
// create div overlay on image
$('<div/>', {
class : 'overlay',
css: {
position: 'relative',
top: pos.top,
left: pos.left,
width: img.outerWidth(),
height: img.outerHeight(),
zIndex: 100
}
})
// save original image position
.data('pos', [pos.left, pos.top])
.appendTo($(this));
// make overlay draggable
$(this).find('.overlay').draggable({
containment : '.demo',
revert: true,
revertDuration: 0,
handle: 'div',
// drag overlay and image
drag: function(e,ui){
img = $(this).parent().find('img');
img.css({
top: ui.position.top,
left: ui.position.left
});
},
// make image revert
stop: function(e,ui){
pos = $(this).data('pos');
$(this).parent().find('img').animate({left: pos[0], top: pos[1] },500);
}
});
});
$("#droppable").droppable({
drop : function(e,ui) {
// append entire div wrapper (.dragme)
ui.helper.parent().appendTo($(this));
}
});
});