The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Parallax background with just CSS [PHPBB2]

View previous topic View next topic Go down

Parallax background with just CSS [PHPBB2]

Post by Raziel21 on November 23rd 2013, 2:43 pm

I'd like to implement something similar to this, I just need to know is it possible and basics if I need to change something in the template/css.

This was the tutorial which I've found.
http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript

This is the effect that I'd like to use.
http://jasonlau.biz/public/examples/css_parallax/vertical.html
Preferably, I'd like to NOT include javascript. That's why I really liked this tutorial. Any help appreciated.Hello


Last edited by Raziel21 on November 26th 2013, 2:59 pm; edited 1 time in total

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by Raziel21 on November 25th 2013, 1:15 pm

Bump

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by erchima on November 25th 2013, 7:30 pm

HTML
Code:

<div class="js-background-1 container">
    <h2>The first box!</h2>
</div>
<div class="js-background-2 container">
    <h2>The second box!</h2>
</div>
CSS

Code:

.container {
    padding: 400px 200px; /* This gives our headings a bit of breathing room */
}
.js-background-1 {
    background: transparent url(background1.png) center 0 no-repeat;
}
.js-background-2 {
    background: transparent url(background2.png) center 0 no-repeat;
}
JS
Code:

var $window = $(window);
var velocity = 0.4;

function update(){
    var pos = $window.scrollTop();

    $('.container').each(function() {
        var $element = $(this);
        var height = $element.height();

        $(this).css('backgroundPosition', '50% ' + Math.round((height - pos) * velocity) + 'px');
    });
};

$window.bind('scroll', update);

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by Raziel21 on November 25th 2013, 10:30 pm

I'd prefer not to use JS, as I wrote in the first post.

I gave an example on the site. Please, if someone knows how to do it purely on CSS (no JS) it'd be great.

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by SLGray on November 25th 2013, 10:33 pm

You do know that you will have to create a CCS code for each browser?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35657
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by erchima on November 25th 2013, 10:47 pm

@Raziel21 wrote:I'd prefer not to use JS, as I wrote in the first post.

I gave an example on the site. Please, if someone knows how to do it purely on CSS (no JS) it'd be great.
http://www.ariona.net/membuat-efek-parallax-dengan-jquery/
http://html-xhtml-css.wonderhowto.com/how-to/create-parallax-background-effect-with-css-377943/

try this code
only CSS
Code:

/*=== General === */

.kont {
width: 90%;
height: 233px;
background: #9ac2ff;
margin: 50px auto 50px auto;
position: relative;
overflow: hidden;
}



/*=== Grass ===*/

.obj-kont-1 {
width: 100%;
height: 63px;
background-image: url(http://cahcepu.com/v3/anim/grass.png);
background-position:bottom;
background-repeat: repeat-x;
position: absolute;
bottom: 0px;
z-index: 1;
-moz-animation: kont-1 2s infinite linear;
-webkit-animation: kont-1 2s infinite linear;
animation: kont-1 2s infinite linear;
}

@-moz-keyframes kont-1 {
from {background-position: 0 0;}
to {background-position: -190px 0;}
}

@-webkit-keyframes kont-1 {
from {background-position: 0 0;}
to {background-position: -190px 0;}
}



/*=== Mountain ===*/

.obj-kont-2 {
width: 100%;
height: 211px;
background-image: url(http://cahcepu.com/v3/anim/mount.png);
background-position:bottom;
background-repeat: repeat-x;
position: absolute;
top: 20px;
-moz-animation: kont-2 13s infinite linear;
-webkit-animation: kont-2 13s infinite linear;
animation: kont-2 13s infinite linear;
}

@-moz-keyframes kont-2 {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}

@-webkit-keyframes kont-2 {
from {background-position: 0 0;}
to {background-position: -400px 0;}
}



/*=== Super Hero Gak Jelas ===*/

.obj-kont-3 {
width: 150px;
height: 63px;
background: url(http://cahcepu.com/v3/anim/super.png) no-repeat top center;
position: absolute;
top: 35px;
left: 40%;
-moz-animation: kont-3 5s infinite linear;
-webkit-animation: kont-3 5s infinite linear;
}

@-moz-keyframes kont-3 {
0% {top: 20px}
50% {top: 42px;}
100% {top: 20px;}
}

@-webkit-keyframes kont-3 {
0% {top: 20px}
50% {top: 42px;}
100% {top: 20px;}
}

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by Ange Tuteur on November 25th 2013, 11:20 pm

I do not believe this would work with Forumotions CSS stylesheet.

Firstly you would need a script to set the required backgrounds:

Code:
jQuery(function(){
jQuery('body').prepend('<div class="background1"></div><div class="background2"></div>');
});
Lastly is the CSS:
Code:
body {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-color: #000000;
}

@-webkit-keyframes animate_background1 {
 0% {
  background-position: 0px 1000px;
 }
 100% {
  background-position: 0px 0px;
 }
}
@-moz-keyframes animate_background1 {
 0% {
  background-position: 0px 1000px;
 }
 100% {
  background-position: 0px 0px;
 }
}
@-ms-keyframes animate_background1 {
 0% {
  background-position: 0px 1000px;
 }
 100% {
  background-position: 0px 0px;
 }
}
@-o-keyframes animate_background1 {
 0% {
  background-position: 0px 1000px;
 }
 100% {
  background-position: 0px 0px;
 }
}
@keyframes animate_background1 {
 0% {
  background-position: 0px 1000px;
 }
 100% {
  background-position: 0px 0px;
 }
}

.background1 {
  position: fixed;
  z-index: 3;
  margin: 0px auto 0px auto !important;
  padding: 0px 0px 0px 0px;
  top: 0px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  background: url("http://i57.servimg.com/u/f57/18/21/41/30/stars10.jpg");
  background-repeat: repeat;
  -webkit-animation: animate_background1 20s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: animate_background1 20s linear;
  -moz-animation-iteration-count: infinite;
  -ms-animation: animate_background1 20s linear;
  -ms-animation-iteration-count: infinite;
  -o-animation: animate_background1 20s linear;
  -o-animation-iteration-count: infinite;
  animation: animate_background1 20s linear;
  animation-iteration-count: infinite;
  opacity:0.8;
  filter:alpha(opacity=80);
  /*display: none;*/
}

@-webkit-keyframes animate_background2 {
 0% {
  background-position: -500px 1000px;
 }
 100% {
  background-position: -500px 0px;
 }
}
@-moz-keyframes animate_background2 {
 0% {
  background-position: -500px 1000px;
 }
 100% {
  background-position: -500px 0px;
 }
}
@-ms-keyframes animate_background2 {
 0% {
  background-position: -500px 1000px;
 }
 100% {
  background-position: -500px 0px;
 }
}
@-o-keyframes animate_background2 {
 0% {
  background-position: -500px 1000px;
 }
 100% {
  background-position: -500px 0px;
 }
}
@keyframes animate_background2 {
 0% {
  background-position: -500px 1000px;
 }
 100% {
  background-position: -500px 0px;
 }
}


.background2 {
  position: fixed;
  z-index: 4;
  margin: 0px auto 0px auto !important;
  padding: 0px 0px 0px 0px;
  top: 0px;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 100% !important;
  background: url("http://i57.servimg.com/u/f57/18/21/41/30/stars10.jpg");
  background-repeat: repeat;
  -webkit-animation: animate_background2 10s linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation: animate_background2 10s linear;
  -moz-animation-iteration-count: infinite;
  -ms-animation: animate_background2 10s linear;
  -ms-animation-iteration-count: infinite;
  -o-animation: animate_background2 10s linear;
  -o-animation-iteration-count: infinite;
  animation: animate_background2 10s linear;
  animation-iteration-count: infinite;
  opacity:0.6;
  filter:alpha(opacity=60);
}
#wrap, .bodyline{
position: relative;
z-index: 5;
}
From my test the FM stylesheet does not support keyframe (at least for me, it shows fine when applied through the web developer tool)

You could perhaps try an external stylesheet, and prepend it to the body, but I am not sure. Unfortunately for this it does require a bit of javascript to accomplish.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by erchima on November 25th 2013, 11:41 pm

developer tool like umm Adobe dreamweaver CS6 :/

final solution if you can not make the parallax iswith 3 way:
__________________________________________________________
way 1


  1. you record a demo background
  2. upload your videos to youtube results
  3. extension convert your videos into extension.gif
  4. upload a picture that has been made. gif to upload provider like, imgur, prntscrn, or other
  5. After you upload, and download link of the image ( copy URL image )
  6. then paste on your background / on your CSS body background
  7. finish
__________________________________________________________
Way 2



  1. provide two different images but almost similar
  2. instal Photoscap
  3. then click GIF menu
  4. insert an image that will be used to GIF
  5. set the speed of image
  6. click save as
  7. upload to provider uploader image
  8. copy URL image
  9. then paste to your bacground image or CSS body background
  10. finish
________________________________________________________
Way 3



  1. instal AnimateGif.EXE
  2. insert an image that will be used to GIF
  3. set the speed of image
  4. click save as
  5. upload to provider uploader image
  6. copy URL image
  7. then paste to your bacground image or CSS body background
  8. finish

hopefully help

erchima
Forumember

Female Posts : 629
Reputation : 15
Language : INDONESIAN | Lua Script | Visual Basic | and Coding
Location : Under your bed xD

http://erchimacute.forumid.net

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by Raziel21 on November 26th 2013, 2:58 pm

From the tests which I did, keyframe doesn't work on forumotion without js.
: [

Topic solved.

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: Parallax background with just CSS [PHPBB2]

Post by Ange Tuteur on November 26th 2013, 3:05 pm

I think the gradient effect didn't work either. Hopefully the sheet will be able to support those eventually. blackeye

Topic Solved and Archived

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum