Moving Backgrounds With Mouse Position

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Let’s say you wanted to move the background-position on an element as you mouse over it to give the design a little pizzazz. You have an element like this:
<div class=”module” id=”module”></div>
And you toss a background on it:
.module {
background-image: url(big-image.jpg);
}
You can adjust the background-position in JavaScript like this:
const el = document.querySelector(“#module”);

el.addEventListener(“mousemove”, (e) => {
el.style.backgroundPositionX = -e.offsetX + “px”;
el.style.backgroundPositionY = -e.offsetY + “px”;
});

See the Pen Move a background with mouse by Chris Coyier (@chriscoyier) on CodePen.
Or, you could update CSS custom properties in the JavaScript instead:
const el = document.querySelector(“#module”);

el.addEventListener(“mousemove”, (e) => {
el.style.setProperty(‘–x’, -e.offsetX + “px”);
el.style.setProperty(‘–y’, -e.offsetY + “px”);
});
.module {
–x: 0px;
–y: 0px;
background-image: url(large-image.jpg);
background-position: var(–x) var(–y);
}
See the Pen Move a background with mouse by Chris Coyier (@chriscoyier) on CodePen.
Here’s an example that moves the background directly in JavaScript, but with a transition applied so it slides to the new position rather than jerking around the first time you enter:
See the Pen Movable Background Ad by Chris Coyier (@chriscoyier) on CodePen.
Or, you could move an actual element instead (rather than the background-position). You’d do this if there is some kind of content or interactivity on the sliding element. Here’s an example of that, which sets CSS custom properties again, but then actually moves the element via a CSS translate() and a calc() to temper the speed.
See the Pen Hotjar Moving Heatmap Ad by Chris Coyier (@chriscoyier) on CodePen.
I’m sure there are loads of other ways to do this — a moving SVG viewBox, scripts controlling a canvas, webGL… who knows! If you have some fancier ways to handle this, link ’em up in the comments.
The post Moving Backgrounds With Mouse Position appeared first on CSS-Tricks.
Source: CssTricks

Posted on October 4, 2018 in css, custom, Design, drupal design,, Drupal Developer, drupal developer austin, Drupal Development, Drupal Support, Expert Drupal Development, javascript, The, Web Design Services

Share the Story

Back to Top