All geek questions in one place

Work with interactive-background.js

I tried to get the parallax effect on the landing page of my site. I used the interactive_bg.js plugin and worked in the opposite direction from the demo tutorial. Finally, I was able to get a snapshot with the desired effect.

Here is my code:
HTML -

<body> <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> </div> </body>

CSS -

 html { height: 100%; } body { padding: 0; text-align: center; font-family: 'open sans'; position: relative; margin: 0; height: 100%; } .wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div. height: auto !important; height: 100%; margin: 0 auto; overflow: hidden; } .bg { position: absolute; min-height: 100% !important; width: 100%; z-index: 0; } .ibg-bg { position: absolute; }

Js -

 $(document).ready(function(){ $(".bg").interactive_bg({ strength: 20, scale: 1.00, contain: false, wrapContent: true }); }); $(window).resize(function() { $(".wrapper > .ibg-bg").css({ width: $(window).outerWidth(), height: $(window).outerHeight() }) })

I redid the tutorial files to find this code.

Now the problem is that everything I put in <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> is distorting the image. Any div that I want to put after the div <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> does not appear even on the screen, but rather behind the background image.

How to put text and other divs in a div <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> and more after the end of this div?

I tried z-index and positioning (looking at the code from the tutorial). This does not seem to work.

In addition, CSS only works when I put it in the style tag inside the <head> HTML. If I put CSS in a separate file, this will not work. (I correctly linked CSS to HTML)

PS link to the tutorial that I linked above, this will give you an idea.

UPDATE:
I made some changes to the HTML and now I have the text above the image. And the text no longer moves, but adds a space at the top. I tried margin but did not remove the space. I still cannot add anything below the image. HTML -

 <body> <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> </div> <div class="main"> <h1> SOME TEXT </h1></div> </body>

CSS -

 #main{ position: relative; }
+5
source share
2 answers

After some deliberation, it turned out to be a JS bug. I made a mistake in javascript when copying a script to execute a plugin.

Let's move on to @Triby for helping me with CSS, but this is a completely different matter, and I will talk about this in another question.

Here's the working JS -

 $(document).ready(function(){ $(".bg").interactive_bg({ scale: 1.05, strength: 25, animationSpeed: "150ms" }) }) $(window).resize(function() { $(".wrapper > .ibg-bg").css({ width: $(window).outerWidth(), height: $(window).outerHeight() }) })
0
source

Have you seen the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html

  • wrapper div will occupy all free space, 100% wide and 100% high.
  • wrapper div contains all contents, position absolute.
  • ibg-bg div just holds the background image and does not intend to contain content inside, the absolute position makes it easy to place content on top of it; no need for z-index.
  • Any other div wrapper div and after ibg-bg div will be displayed on top.

How do you put text over the background? As I said before, put this content inside the div wrapper and after the ib-bg div.

How do you put text or more content after this div? Add new content under the div wrapper and start playing with css properties to adapt the demo to your preferences.

 <body> <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> <!-- You need this next div --> <div class="ibg-bg"></div> <div>This will appear over your background</div> </div> <div>This will appear below your background</div> </body>

[Edit] CSS Copied from demo.

 #main { position:relative; float:left; width:100%; margin:0 auto; }

[/ edit]

+1
source

Source: https://habr.com/ru/post/1270516/

More articles:


All Articles