how does one achieve this type of...

User 283347 Photo


Registered User
388 posts
Online Now

Hello friends,

wondering if anyone can point me in the right direction for the following...

The type of effects here... http://www.kitcheninc.net/ are really cool (to me anyway).

What would the general layout have to look like in rlmp to make it happen? Are the backgrounds in their own column or row?

I know it is very detailed to answer, but if anyone can point me to a tutorial or general instructions that would be cool.

Thanks,

Mark
User 122279 Photo


Senior Advisor
14,454 posts

Check out this: http://www.script-tutorials.com/bootstr … ax-effect/
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 283347 Photo


Registered User
388 posts
Online Now

Thanks, Inger.

I'll give that site a look and see if I can learn something:)
User 434929 Photo


Ambassador
938 posts

Parallax effect I made one with RLMP and few extra CSS code in Code editor
https://www.youtube.com/watch?v=eeVuhlB9fP8
Guys at coffeecup are awesometacular.
User 283347 Photo


Registered User
388 posts
Online Now

Thanks, Mansour.

That is a great video. However, I'm not sure how I do the background images the way they are on that site. It appears I must use bootstrap, but I'm still messing with it :)
User 473158 Photo


Registered User
17 posts

Hello Mark

Do you mean this effect ?
https://dl.dropboxusercontent.com/u/493 … index.html

If yes, there is no Bootstrap involved. Just RLM and very little css for the rows.


User 283347 Photo


Registered User
388 posts
Online Now

Chris,

Thanks for the link. Yes that is the effect. I did find one online in jsfiddle that is very similar to yours...might be the same one?? It did not require bootstrap or j query...just html and css. I've been messing around with it. When I get some time I'm going to try to replicate yours as well.

Thanks, again, for the link. I know enough to be dangerous so watch out! :)
User 283347 Photo


Registered User
388 posts
Online Now

Hello Everyone,

So I have been messing with this and here is what I need help on.

I have the desired effect with the photos but...when looking at them on a laptop or desk top, the photos behave responsively when I shrink the screen...but on my phone they have not moved at all...they look good and crisp, but just have not moved...they are also fixed...meaning you cannot scroll left or right ...you are just seeing the left hand side of the picture...I hope this makes sense. The rest of the layout seems to work well...any ideas on how to fix this?

Here is the link http://mynetshepherd.coffeecup.com/

for now...the css for the pictures is in the main.css... starting at line 196...and ...you can disregard section S4 there is no pic or area assigned ...even thought it is there in css

Everyone have a great day!!


User 473158 Photo


Registered User
17 posts

Hi Mark
I do not know why the additional css-rules are in the main.css but anyway.
Try to put the css to each section, e.g.:
.section#s1 {
background-image: url(http://mkonetwork.com/revisedpics/Lands … ised10.jpg);
display: table;
height: 100%;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

With me it works !
User 283347 Photo


Registered User
388 posts
Online Now

Thank you, Chris!

I'll give that a try. I'll keep you posted:)

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.