I would like to set hyperlink on an image with this JSON: {url: 'img/enf.png', x: 1200, y: 530, offset: -0.1} in a parallax effect, so if you click on this image, you go to "news.html".
Code I currently have:
<html>
<head>
<style>
body{
margin:0;
overflow-x: hidden;
}
#pozadi{
background-image: url(img/pozadi.png);
overflow: hidden;
background-size: cover;
background-position: top;
background-repeat: no-repeat;
position: relative;
min-height: 500px;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="pozadi">
<div id="container"></div>
</div>
<script src="tweenmax.js"></script>
<script src="snapsvg.js"></script>
<script>
if (screen.width > 1200){
var assets = [
{url: 'img/vybuch.png', x: 0, y: 60, offset: -0.25},
{url: 'img/psi.png', x: 200, y: 80, offset: -0.2},
{url: 'img/kour.png', x: 120, y: 280, offset: -0.15},
{url: 'img/enf.png', x: 1200, y: 530, offset: -0.1},
{url: 'img/csf.png', x: -40, y: 530, offset: -0.1},
{url: 'img/nadpis.png', x: 350, y: 530, offset: 0.01},
{url: 'img/sbt.png', x: 610, y: 665, offset: 0.01},
],
layers = [],
w = screen.width,
h = screen.height,
loaded = 0,
container = document.getElementById('container'),
s = new Snap(w, h);
container.appendChild(s.node);
g = s.g();
c = s.g();
c.attr({transform: 'scale(1)'});
g.append(c);
for (var i = 0; i < assets.length; i++) {
var img = new Image();
img.src = assets[i].url;
img.onload = handle_load;
/*Start my code*/
if (i==3) { //3 is your 'img/enf.png', or check the string in img.src
img.onclick = function(e){
window.location.href = 'www.debil.cz';
}
}
/*End my code*/
var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
c.append(_img);
layers.push(_img);
}
function handle_load(e) {
loaded += 1;
if (loaded == assets.length) {
handle_loaded();
}
}
function handle_loaded() {
container.addEventListener('mousemove', handle_mousemove);
container.addEventListener('mouseout', handle_mouseout);
container.addEventListener('mouseover', handle_mouseover);
}
function handle_mousemove(e) {
var dx = e.offsetX - (w / 2);
var dy = e.offsetY - (h / 2);
for (var i = 0; i < layers.length; i += 1) {
var l = layers[i];
var _x = dx * assets[i].offset;
var _y = dy * assets[i].offset;
TweenMax.to(l.node, 0.1, {x: _x, y: _y});
}
}
function handle_mouseout(e) {
for (var i = 0; i < layers.length; i += 1) {
var l = layers[i];
TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
}
TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
}
function handle_mouseover(e) {
TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
}
function angleToPoints(angle) {
var segment = Math.floor(angle / Math.PI * 2) + 2;
var diagonal = (1/2 * segment + 1/4) * Math.PI;
var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
var x = op * Math.cos(angle);
var y = op * Math.sin(angle);
return {
x1: x < 0 ? 1 : 0,
y1: y < 0 ? 1 : 0,
x2: x >= 0 ? x : x + 1,
y2: y >= 0 ? y : y + 1
};
}
}else if (screen.width > 600){
var assets = [
{url: 'img/vybuch_tablet.png', x: -450, y: 80, offset: -0.25},
{url: 'img/psi_tablet.png', x: -280, y: 140, offset: -0.2},
{url: 'img/kour_tablet.png', x: -220, y: 350, offset: -0.15},
{url: 'img/enf_tablet.png', x: 470, y: 830, offset: -0.1},
{url: 'img/csf_tablet.png', x: 85, y: 830, offset: -0.1},
{url: 'img/nadpis_tablet.png', x: 5, y: 610, offset: 0.01},
{url: 'img/sbt_tablet.png', x: 150, y: 740, offset: 0.01},
],
layers = [],
w = screen.width,
h = screen.height,
loaded = 0,
container = document.getElementById('container'),
s = new Snap(w, h);
container.appendChild(s.node);
g = s.g();
c = s.g();
c.attr({transform: 'scale(1)'});
g.append(c);
for (var i = 0; i < assets.length; i++) {
var img = new Image();
img.src = assets[i].url;
img.onload = handle_load;
var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
c.append(_img);
layers.push(_img);
}
function handle_load(e) {
loaded += 1;
if (loaded == assets.length) {
handle_loaded();
}
}
function handle_loaded() {
container.addEventListener('mousemove', handle_mousemove);
container.addEventListener('mouseout', handle_mouseout);
container.addEventListener('mouseover', handle_mouseover);
}
function handle_mousemove(e) {
var dx = e.offsetX - (w / 2);
var dy = e.offsetY - (h / 2);
for (var i = 0; i < layers.length; i += 1) {
var l = layers[i];
var _x = dx * assets[i].offset;
var _y = dy * assets[i].offset;
TweenMax.to(l.node, 0.1, {x: _x, y: _y});
}
}
function handle_mouseout(e) {
for (var i = 0; i < layers.length; i += 1) {
var l = layers[i];
TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
}
TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
}
function handle_mouseover(e) {
TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
}
function angleToPoints(angle) {
var segment = Math.floor(angle / Math.PI * 2) + 2;
var diagonal = (1/2 * segment + 1/4) * Math.PI;
var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
var x = op * Math.cos(angle);
var y = op * Math.sin(angle);
return {
x1: x < 0 ? 1 : 0,
y1: y < 0 ? 1 : 0,
x2: x >= 0 ? x : x + 1,
y2: y >= 0 ? y : y + 1
};
}
}else{
var assets = [
{url: 'img/vybuch_phone.png', x: 0, y: 0, offset: -0.25},
{url: 'img/psi_phone.png', x: -400, y: 0, offset: -0.2},
{url: 'img/kour_phone.png', x: -300, y: 100, offset: -0.15},
{url: 'img/enf_phone.png', x: 200, y: 540, offset: -0.1},
{url: 'img/csf_phone.png', x: 20, y: 540, offset: -0.1},
{url: 'img/nadpis_phone.png', x: 30, y: 430, offset: 0.01},
{url: 'img/sbt_phone.png', x: 65, y: 495, offset: 0.01},
],
layers = [],
w = screen.width,
h = screen.height,
loaded = 0,
container = document.getElementById('container'),
s = new Snap(w, h);
container.appendChild(s.node);
g = s.g();
c = s.g();
c.attr({transform: 'scale(1)'});
g.append(c);
for (var i = 0; i < assets.length; i++) {
var img = new Image();
img.src = assets[i].url;
img.onload = handle_load;
var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
c.append(_img);
layers.push(_img);
}
function handle_load(e) {
loaded += 1;
if (loaded == assets.length) {
handle_loaded();
}
}
function handle_loaded() {
container.addEventListener('mousemove', handle_mousemove);
container.addEventListener('mouseout', handle_mouseout);
container.addEventListener('mouseover', handle_mouseover);
}
function handle_mousemove(e) {
var dx = e.offsetX - (w / 2);
var dy = e.offsetY - (h / 2);
for (var i = 0; i < layers.length; i += 1) {
var l = layers[i];
var _x = dx * assets[i].offset;
var _y = dy * assets[i].offset;
TweenMax.to(l.node, 0.1, {x: _x, y: _y});
}
}
function handle_mouseout(e) {
for (var i = 0; i < layers.length; i += 1) {
var l = layers[i];
TweenMax.to(l.node, 0.2, {x: 0, y: 0, ease: Quad.easeOut});
}
TweenMax.to(s.node, 0.2, {scale: 0.9, rotationY: 0, rotationX: 0, ease: Quad.easeOut});
TweenMax.to(c.node, 1, {rotationY: 0, rotationX: 0});
}
function handle_mouseover(e) {
TweenMax.to(s.node, 0.2, {scale: 1, ease: Back.easeOut});
}
function angleToPoints(angle) {
var segment = Math.floor(angle / Math.PI * 2) + 2;
var diagonal = (1/2 * segment + 1/4) * Math.PI;
var op = Math.cos(Math.abs(diagonal - angle)) * Math.sqrt(2);
var x = op * Math.cos(angle);
var y = op * Math.sin(angle);
return {
x1: x < 0 ? 1 : 0,
y1: y < 0 ? 1 : 0,
x2: x >= 0 ? x : x + 1,
y2: y >= 0 ? y : y + 1
};
}
}
</script>
</body>
</html>
I have tried to do it with an a tag using href attribute in my html, but it totally breaks the parallax effect.
I am not the expert in javascript, I just changed the code I found and it works perfectly, but in my project, I definitelly need to set a link on the image. Do you have any idea how to do it please?
Try something like this (into the first for):
for (var i = 0; i < assets.length; i++) {
var img = new Image();
img.src = assets[i].url;
img.onload = handle_load;
/*Start my code*/
if (i==3) { //3 is your 'img/enf.png', or check the string in img.src
img.onclick = function(e){
window.location.href = 'the link of your news.html';
}
}
/*End my code*/
var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
c.append(_img);
layers.push(_img);
}
You are right, we wrong.
First of all, what your code generate is an SVG, and the SNAP library click event is this: http://snapsvg.io/docs/#Element.click
For this reason, the code above must be modified in this way:
for (var i = 0; i < assets.length; i++) {
var img = new Image();
img.src = assets[i].url;
img.onload = handle_load;
var _img = s.image(assets[i].url, assets[i].x, assets[i].y);
/*Start my code*/
if (i==3) {
_img.click(function(){
//window.location.href = 'www.debil.cz';
alert('yeah');
});
}
/*End my code*/
c.append(_img);
layers.push(_img);
}
BUT
You must remember that: the parallax effect work on layers, and the click event can't fired if an "invisible" element is below (as a blank region of a PNG).
Here a working example but with click on the item in the foreground !! https://jsfiddle.net/StepBaro/hachn1sL/3/
Here another working example with click on the third element, and the event fired only on very top (because the first is above). https://jsfiddle.net/StepBaro/hachn1sL/4/
Your assets array has as the last item inserted the highest element.