First of all, here's a link to a page I'm working on, so you can see what I mean for yourself:
http://37.60.224.20/~mdg17761/mirzarasic.com/about-me/
And, here's a link to the effect in the background:
https://github.com/jnicol/particleground
If you go to the page, you'll notice you can't scroll the section in the middle. The website link also isn't clickable and you can't select any of the text.
I'm using Wordpress with the Divi theme to build the website, as well.
I've added the code which creates the background in a Code Module and, it looks like this:
<script>
document.addEventListener("DOMContentLoaded", function() {
particleground(document.getElementById("particleground"), {
dotColor: '#ffffff',
lineColor: '#blue',
particleRadius: 0
});
var intro = document.getElementById('intro');
intro.style.marginTop = -intro.offsetHeight / 2 + 'px';
}, false);
</script>
<style>
#particleground {
position: relative;
}
#particleground canvas {
position: absolute;
z-index: 996;
opacity: 0.2;
}
</style>
Removing the Code Module makes the entire section work again. I've been looking through the source of the plugin, but, I simply don't have enough experience with JavaScript and can't figure out what might be doing this.
I assume you want the particle canvas in the background?
You'll need to change the z-index of your "particle ground", as it's rendering on top of your content area. I'd consider adjusting where you put the code for the particle ground (either higher in the DOM for a naturally lower z-index, or at the bottom closer to the </body> tag and setting the z-index to 0 giving it a structurally lower presence while still needing to lower the z-index.
#particleground {
position: relative;
z-index: 0;
}
(Note, with this you can remove the z-index from your #particleground canvas selector.
If you don't want the center section to be white (which the above code will do), you can set the background of it to transparent to let the canvas show through it:
.et_pb_section_1 {
background: transparent;
}
If you really want the particles "on top" for some reason, while I strongly recommend against it, you can add pointer-events: none; to #particleground - read more here
Related
I have a background image that has 4 images of a character in different walking positions.
Is it possible on scroll with Skrollr to move the sprite position (let's say by 150px on the x co-ordinate) every 0.5 seconds?
Want to give it a walking effect but only on scroll.
Maybe there's another way to achieve this effect? Quite keen on only using Skrollr as I've used it in the past and LOVE it!
The only way I've managed to achieve this so far is by creating a sprite of images on a completely landscape canvas type so that all of the images are changed upon the X-Axis then using skrollr stylesheets (click here for github) to apply the animation upon scroll.
Start by making a Skrollr.css file. Be sure to include the 'data-skrollr-stylesheet' to the link tag.
<link href="css/skrollr.css" rel="stylesheet" data-skrollr-stylesheet>
Right before the closing body tag, include the skrollr stylesheet min js file followed by the skrollr JS. See below.
<script type = "text/javascript" src="dist/skrollr.stylesheets.min.js"></script>
<script type = "text/javascript" src="js/skrollr.js"></script>
To get you started I've placed a simple demo of what your skrollr stylesheet should look like.
.div-name {
-skrollr-animation-name: animation1;
}
#-skrollr-keyframes animation1 {
500 {
background-position: 0px;
}
600 {
background-position: -100px;
}
}
The numbers in the animation are relative to the top of the browser window. 600px from the top of the window, the background-position will move -100px on the X-axis.
I am currently trying to figure out how to remove the transition/slider effect on scroll. Personally I'd like the images to change on demand rather than scroll. I hope my instruction has given you something to start with and if I figure out how to change the image instantly without the transition, I will expand on this here. Good luck with the project.
I managed to include frame-by-frame sprite animation in skrollr by adding a custom easing that does the trick. Math.round in my intuition would return sort of a square wave and surprisingly it worked (but be aware, I'm not sure about the math behind it):
var s = skrollr.init({
easing: {
frames: function(p) {
return Math.round(Math.sin(p) * 50);
}
}
});
This custom easing will:
loop your animation without any interpolation so that you don't get that infamous "sliding" instead of the animation.
After that you call the animation on css this way (please note I'm using skrollr stylesheet but there's no reason why it shouldn't work directly with html data tags as well):
.animation{
display: block;
width: 208px; /*your sprite width*/
height: 227px; /*you sprite height*/
background-image: url(yourspritesheet.png);
background-position: 0px 0px;
-skrollr-animation-name: youranimation;
}
#-skrollr-keyframes youranimation{
start{background-position-x[frames]:0px;}
end{background-position-x[frames]:208px;}
}
In this example, the spritesheet is horizontal and 208px is the sprite width. The code will go through the spritesheet at steps of 208px and start from the beginning when it reaches the end. Tested on Chrome, Firefox and Safari. You can find an example of the result here (school project): http://www.sartirani.it/daniele/scroll/public_html/
I am looking into adding a single page overlay when a user clicks the "Help" button in a web app I've created. Below is an example of what I want to achieve
I have jquery mobile implemented on my pages with javascript. I looked into the jquery mobile popup panels that overlay a page but it wouldn't serve my purposes.
What resources, libraries, language, etc would I go about doing this? I tried to google but the I get irrelevant results.
I haven't try it, but you can put the background in a div leaving it in behind the classic background (using low css z-index) with a fixed position (absolute position), a fixed width/height (100%/100%) and a trasparency.
When the user click the "Help" buttons you change the z-index putting it on the front of the page.
UPDATE
Assuming a html layout similar like this:
<html>
<head>...</head>
<body>
<div id="container">
<!-- some others divs with the content of the page and the help link -->
HELP
</div>
<div id="over_image"> <!-- add this -->
<img src="path_to_the_overlapping_image" alt="overlap image" />
</div>
</body>
</html>
A default CSS like this
div#container {
z-index: 100;
}
div#over_image {
z-index: -100; // by default the over image is "behind" the page
position: absolute;
top: 0px;
left: 0px;
width: 100%; // or puts the width/height of the "screen" in pixels
height: 100%;
}
div#over_image img {
width: 100%;
height: 100%;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
And at the end the jQuery function
$("a#help_button").on("click", function(event){
event.preventDefault(); // it's not really a link
$("div#over_image").css("z-index", "1000");
})
You should implement the "hide" function too, to "reset" the overlapping image on some action, maybe something like this:
$("div#over_image img").on("click", function(){
// when the user click on the overlap image, it disappears
$("div#over_image").css("z-index", "-100");
})
I haven't try it, maybe there are some more little things to change to make it works correctly, but it is a good begin.
SOME REFERENCES
Opacity / transparency: http://www.w3schools.com/css/css_image_transparency.asp
jQuery css: http://api.jquery.com/css/
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
I'm using Jquery Easy Slider on Opencart v.1.5.1
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider
What I'm trying to do is use easy slider for the best seller section of my homepage.
I've copied all files required but I'm having problems with it.
Only 1 image shows when it slides (I think it's because of the UL width but i'm not sure how to set it)
the next and previous arrows are out of place.
Here's the url of the site: http://goo.gl/f4Xi0
span id="nextBtn", its "position" is set to "absolute", right? So its parent div should be set to "position:relative", otherwise its position will be relative to the whole document.
http://www.w3schools.com/css/css_positioning.asp
You need to put .box-product { position: relative; } and then work your way forward with the css to adjust #prevBtn and #nextBtn left values to put the arrows where you want them.
http://www.csspivot.com/p3rn7 - This is after the .box-product { position: relative; } ( note that #prevBtn is still lost but adjust those left values and it will come back.. something like 0px for that maybe and something like 600px for #nextBtn )
I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?
Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)
I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });
I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}