Is it possbile to set a preset amount an image rotates per scroll?
I created a rotate function with js, which rotates an image (gears in my case) by scrolling up and down the website. In my opinion it needs to rotate more degrees per scroll and Im trying to increase the degrees the image is rotating
JS
function rotate(e) {
e.preventDefault();
rot += e.deltaY * 0.5;
leftGear.style.transform = `rotate(${rot}deg)`;
rightGear.style.transform = `rotate(${rot}deg)`;
}
let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;
html
<div class="gearBox">
<!--<img src="img/proxcopAIO.png" height="60">-->
<img src="img/gearProxBlue.png" id="gearText" height="100">
<div class="rightGear" id="rightgear">
<img src="img/gear.png" height="50">
</div>
<div class="leftGear" id="leftgear">
<img src="img/gear.png" height="50">
</div>
</div>
I tried changing '0.5' as factor but somehow it doesnt change anything, or maybe its a false thought of mine
it's because your rotate the whole div which width is 100% of your browser.
Add a width to your div, it will solve your problem
.rightGear{
width:100px;
}
Related
I'm a beginner, writing a website and trying to add an image carousel into my homepage. I have 6 images displayed on screen next to each other. What I'm trying to do is move my images 1 to the left when the website is loaded so that slide1 is the first one to be displayed. Here is part of my index.html:
<div class="cover-art-carousel">
<div class="slide">
<img src="./covers/slide6.jpg" id="lastClone">
<img src="./covers/slide1.png">
<img src="./covers/slide2.png">
<img src="./covers/slide3.jpg">
<img src="./covers/slide4.jpg">
<img src="./covers/slide5.jpg">
<img src="./covers/slide6.jpg">
<img src="./covers/slide1.png" id="firstClone">
</div>
</div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
<script src="app.js"></script>`
And this is my js:
const carouselSlide = document.querySelector('.slide');
const carouselImages = document.querySelectorAll('.slide img');
//Buttons
const prevButton = document.querySelector('#prevBtn');
const nextButton = document.querySelector('#nextBtn');
//Counter
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
When I load the site, clientWidth is equal to 0 even though I know it should be 300. The weirdest thing is that if I add an alert into my JS, it works fine. I'm sure I'm missing something super obvious but if anyone could help that would be great. Hope this makes sense. Thanks!
wrap your js script like this:
window.onload = function(){ the rest of your js.....
}
it would seem that you may be trying to get the width before the images are loaded in.
I have to mark the icon on image based on x,y coordinates in angular 4.
I had done coding for desktop view. its working as expected.
But when i move to mobile and tablet device responsiveness is not working.
please help me to solve this issue.
<div class="container col-md-6">
<img src="https://imgd.aeplcdn.com/1056x594/n/3cpbpra_1422080.jpg?q=80" class="img-thumbnail" alt="Cinque Terre" (mousemove)="getImageCoordinate($event)" (click)="lockTheImageCordinates()" (mouseleave)="resetImageCordinates( )">
<img style="width:35px;position: absolute !important;" [hidden]="showTheImage" [ngStyle]="setMyStyles()" src="https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png"id="marker" (click)="getImageData()"/>
getImageCoordinate(elem) {
this.xAxis = elem.offsetX;
this.yAxis = elem.offsetY - 30;
}
lockTheImageCordinates() {
this.xAxisLocked = this.xAxis;
this.yAxisLocked = this.yAxis;
this.showTheImage=false;
}
setMyStyles() {
let styles = {
'left':this.xAxisLocked+'px',
'top': this.yAxisLocked+'px'
};
return styles;
}
I am trying to implement before-after image comparison by jquery below.It takes two images and shows the comparison.
fiddled here
<div>
(image comparison1)
</div>
<div>
(image comparison2)
</div>
<div>
(image comparison3)
</div>
though it is very useful for me for single pair comparison, but the problem is whenever I want to implement the same effect with multiple pair, the container size defined in css becomes trouble. I have tried to make the width and height of css as auto & as fit to content, but nothing seems to work. I want to implement multiple pair comparison on the same page as shown in div above.
its like pairs of before after images.Each pair is of different size. Any suggeston for corrections with my coding is really appreciated.
Thank You in advance.
After some searching, this was the solution:
<div class="beforeAfterSlidebar" style="width:400px;height: 400px;">
<div class="bottomImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-4656-990776-1-product2.jpg" width="400" height="400" alt="after" /></div>
<div class="topImage"><img src="http://static13.jassets.com/p/Clarus-Urbane-Solid-Cotton-400-Tc-Satin-Double-Comforter-3369-201776-1-product2.jpg" width="400" height="400" alt="before" /></div>
</div>
<div class="beforeAfterSlidebar">
<div class="bottomImage"><img src="http://upstairsweb.com/images/afterImage.jpg" width="200" height="200" alt="after" /></div>
<div class="topImage"><img src="http://upstairsweb.com/images/beforeImage.jpg" width="200" height="200" alt="before" /></div>
</div>
With the JS:
$(".topImage").css('width', '50%');
$(".beforeAfterSlidebar").mousemove(
function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).find(".topImage").width(iTopWidth);
});
=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Old answers - but they might help others:
I think you mean something like this?
http://jsfiddle.net/m9jj2fsp/6/
I didn't use divs, but the images instead to create the effect:
<div class="beforeAfterSlidebar">
<img id="topImg" src="http://upstairsweb.com/images/afterImage.jpg" width="800" height="600" alt="after" />
<img id="middleImg" src="http://placehold.it/300" width="800" height="600" alt="middel"/>
<img id="botImg" src="http://upstairsweb.com/images/beforeImage.jpg" width="800" height="600" alt="before" />
</div>
The javascript to go with it:
$(".beforeAfterSlidebar").mousemove(function(e) {
// get the mouse x (horizontal) position and offset of the div
var offset = $(this).offset();
var iTopWidth = (e.pageX - offset.left);
// set width of bottomimage div
$(this).children("#middleImg").css("clip", "rect(0px," + (iTopWidth + 50) + "px,600px,"+(iTopWidth - 50) +"px)");
$(this).children("#botImg").css("clip", "rect(0px," + (iTopWidth - 50) + "px,600px,0)");
});
If this isn't what you needed, just tell me, and I'll try to adapt my code.
I have one background image(City image) with scroll, on that image I am placing some small images(Just like bomb images on the city image). I have canvas width and height depending on these variables I am placing the bomb image on the city image. When I place the bomb image at can.width/2 and can.height/2 in 430*300 devices, image will be on the center but when I try testing on bigger screen mobile, bomb image position is changing. I need to place bomb image in the same location for all devices. When I zoom in also position is changing. Anybody please help me to solve this scenario.
Here is my code
function smallBombImg(){
document.getElementById('carImg1').style.top = can.width/2 +"px";
document.getElementById('carImg1').style.left = can.height/2 +"px";
//document.getElementById('carImg1').style.background-attachment = "fixed";
document.getElementById('carImg1').style.display = "block";
document.getElementById('carImg1').src = 'img/bomb1.png';
}
HTML code is here
<body>
<div id="container">
<canvas id="can"></canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
<div>
<img alt="simple1" id="carImg1" style="position: absolute; display: none;" />
</div>
</body>
I have to be brief, I am very sorry but I am running late.
Using jQuery:
var windowEventTimeoutEnded;
$(window).resize(function() {
clearTimeout(windowEventTimeoutEnded);
$(window).height(); // gets the height of the window
$(window).width(); // gets the width of the window
// This ensures the below does not trigger until the resize event is finished
windowEventTimeoutEnded = setTimeout(function() {
// Perform your resizing math and logic here, such
canvas.css({
width: 1234,
height: 235,
position: 'absolute' // etc, etc, etc
})
}, 500 );
});
Sorry for the brevity, hope this helps. I will return later and check if this helped and add to it if necessary, good luck!
What im looking to achieve is to modify the margin-left css property of a div when someone slides their finger across the div on an ipad.
To explain what i'm trying to do, I have setup this page:
http://littleirrepressiblewonton.com/wp7/category/all/
Now when someone clicks on a thumbnail image, it loads a horizontal slideshow of large images. Some of the images are too wide to fit on the ipad and they wish to use touch to drag this horizontal slideshow of images left or right.
The way the divs are setup are as follows:
<div class='WontonGalleryFullsMask'>
<div class='WontonGalleryFulls' data-animating='no'>
<div class="WontonGalleryFullImage" data-idx="0" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster022/2835976114.jpg" alt="VP_test_poster022" /></div>
<div class="WontonGalleryFullImage" data-idx="1" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster021/663128145.jpg" alt="VP_test_poster021" /></div>
<div class="WontonGalleryFullImage" data-idx="2" ><img src="http://littleirrepressiblewonton.com/wp7/wp-content/uploads/cache/VP_test_poster020/3945564367.jpg" alt="VP_test_poster020" /></div>
</div>
</div>
The div.WontonGalleryFullsMask has the following css and is setup as a mask.
height: 523px;
overflow: hidden;
width: 100%;
and then the margin-left property of the div.WontonGalleryFulls div is modified to move the gallery left and right.
So if someone slides 300px on the ipad, I need to modify the margin-left css property of the div.WontonGalleryFulls
I'm looking for a jquery solution as the site is already using it.
i ended up modifying a script from http://popdevelop.com/2010/08/touching-the-web/
$.fn.draggable = function() {
var offset = null;
var start = function(e) {
var orig = e.originalEvent;
var ml = parseInt($(this).css('margin-left'));
offset = {
x: orig.changedTouches[0].pageX - ml //pos.left
};
};
var moveMe = function(e) {
e.preventDefault();
var orig = e.originalEvent;
$(this).css({
'margin-left': orig.changedTouches[0].pageX - offset.x
});
};
this.bind("touchstart", start);
this.bind("touchmove", moveMe);
};
$('div.WontonGalleryFulls').css('position', 'absolute');
$('div.WontonGalleryFulls').draggable();