How can i use handlebars data in front end js variable

How can i use handlebars data in front end js variable

I'm trying to create the exact effect below (but on a pop up modal). I got it to work so far but the html is broken (img tags not closed). And if I fix the img tags the perspective effect goes away. Can someone explain why and show me how to fix it please? I have perspective:100px on the main wrapper as per this article&nbsp;<a href="https://css-tricks.com/almanac/properties/p/perspective/" target="_blank">https://css-tricks.com/almanac/properties/p/perspective/</a>..

I'm trying to create the exact effect below (but on a pop up modal). I got it to work so far but the html is broken (img tags not closed). And if I fix the img tags the perspective effect goes away. Can someone explain why and show me how to fix it please? I have perspective:100px on the main wrapper as per this article https://css-tricks.com/almanac/properties/p/perspective/..

var lFollowX = 0,
    lFollowY = 0,
    x = 0,
    y = 0,
    friction = 1 / 30;

function moveBackground() { x += (lFollowX - x) * friction; y += (lFollowY - y) * friction;

translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';

$('.bg').css({ '-webit-transform': translate, '-moz-transform': translate, 'transform': translate });

window.requestAnimationFrame(moveBackground); }

$(window).on('mousemove click', function(e) {

var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX)); var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY)); lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow lFollowY = (10 * lMouseY) / 100;

});

moveBackground(); body { height: 100vh; }

.wrap { background-color: #0F2044; -webkit-perspective: 100px; perspective: 100px; height: 100%; position: relative; overflow: hidden; } .wrap .bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; -webkit-transform: scale(1.1); transform: scale(1.1); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrap">

<div class="bg"> <img class="front" src="https://shannels.com/fg.svg" </div> <div class="bg"> <img class="front" src="https://shannels.com/mg.svg" </div> <div class="bg"> <img class="front" src="https://shannels.com/bg.svg" </div>

</div>


javascript jquery html css

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Building a minesweeper game using Javascript, HTML and CSS

In this article, you'll learn how to build minesweeper using JavaScript, HTML and CSS. I also used jQuery, a JavaScript library that is helpful for interacting with html. Whenever you see a function call with a leading dollar sign, that is jQuery at work

Material Login & Signup Form with CSS, HTML and JavaScript

How we can create a login and signup form with the material design using HTML CSS JavaScript? Solution: See this CSS Material Login & Signup Form With jQuery, Material Design Form.

Bar Graphs with Animation using JavaScript, HTML, & CSS

How we can create Bar Graphs With Animation using JavaScript, HTML, & CSS? Solution: JavaScript Animated Bar Graph. In Other Words, Bar Chart With Animation Effects.

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown

Countdown with HTML, CSS, and JavaScript / How to create JavaScript Countdown. W will build a Responsive Website with HTML, CSS, and JavaScript

Creating Price Range Slider using JavaScript, HTML and CSS

How we can create price range slider with minimum and maximum value? Solution: See this Create Price Range Slider using JavaScript, HTML and CSS, Min and Max Price Select.