Función Responsive Javascript 360
Publicado por Jesús (1 intervención) el 16/05/2019 13:01:17
Buenas,
soy un poco novato o con Javascript ya que soy diseñador pero por necesidades he tenido que buscar una función para conseguir un efecto en una web.
He encontrado una función que cumple mis necesidades y a la vez sencilla pero no tengo encuentro la manera de encontrar la formula para que sea responsive. El efecto que quiero conseguir es una imagen 360 ( Sprite) que vaya girando según vaya haciéndose Scroll. El tamaño del Sprite me lo está cogiendo en pixeles pero necesitaria que fuese en porcentajes para que hiciera responsive.
La imagen del background me la está cogiendo del css,
Muchas gracias por adelantado y un saludo!
soy un poco novato o con Javascript ya que soy diseñador pero por necesidades he tenido que buscar una función para conseguir un efecto en una web.
He encontrado una función que cumple mis necesidades y a la vez sencilla pero no tengo encuentro la manera de encontrar la formula para que sea responsive. El efecto que quiero conseguir es una imagen 360 ( Sprite) que vaya girando según vaya haciéndose Scroll. El tamaño del Sprite me lo está cogiendo en pixeles pero necesitaria que fuese en porcentajes para que hiciera responsive.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
$(function() {
var rotator = $('#rotator');
var container = $(document);
var viewport = $(window);
var images = 24;var imageHeight = 26183 / images;
var scrollHeight = container.height() - viewport.height() + imageHeight;
var step = images / scrollHeight;
viewport.scroll(function(event) {
if (viewport.scrollTop() > 0) {
var x = -Math.floor(step * (viewport.scrollTop() - 0)) * imageHeight;
rotator.css('background-position', x + 'px 0');
}});
});
</script>
La imagen del background me la está cogiendo del css,
1
2
3
4
5
6
7
8
9
10
11
12
13
#rotator {
font-size: 416px;
width: 2.5em;
height: 3em; position: relative; top: 0px; left: 0px;margin-left:-50%;
z-index: -1;
position:fixed;background-size:100%;
background: transparent url(sprite_melon_total.jpg) no-repeat 0 0;
}Muchas gracias por adelantado y un saludo!
Valora esta pregunta
0