HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Designing a Parallax Theme

Login / Search

 [ Join | More ]
 Add topic 
Posted
Item has a rating of 5 (Liked by FletchLiked by sholzyLiked by Robbie Goacher)  
Rating:
#92389 (In Topic #18526)
Avatar

Community saint

jquery scrolling animation integration with ocPortal



Over the past few weeks I've noticed a few more websites appearing online using parallax methods in their designs with some very impressive results.

"Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines". - Wikipedia

In terms of the parallax scrolling or parallax design, this is the technique of moving or changing background elements on a website at a different speed to that of the foreground elements. This results in different website elements changing as a user scrolls or navigates through a website. It creates the illusion of perspective movement as the user moves with the website.

My goal was to integrate with ocPortal four jquery scripts and plugins needed to do my parallax design:
  • jquery.1.7.2.min.js
  • jquery.scrolling-parallax.js
  • jquery.scrollTo-1.4.3.1-min.js
  • jquery.easing.1.3.js

The biggest challenge was to make this work across the latest versions of the current popular browsers, namely Internet Explorer, Google Chrome, FireFox, Safari, and Opera. I expected a real struggle with IE and FF, but to my dismay Chrome and Safari were the real let down here. They resisted from the get go, showing signs of stuttering during scrolls, even before integration with ocPortal. I dropped Safari all together from my list of hopefuls as nothing I did satisfied its stubborn sluggishness with jquery animation. I was finally able to lead the others successfully to the jquery animation corral until I realized my design only worked smooth when I was logged -in to my test site. Except for Firefox, the browsers exhibited erratic behaviors at the guest level. The only way, I could get them to work as intended was to cut down my page design to two columns (main content and right side panel). I finally removed the side panels altogether to give it a better sense of balance.

I'm baffled as to why this is so and I'm enlisting the help of those interested by this kind of design to find a solution together. I don't think I want to make this an official shared theme until I can understand why this weird behavior is taking place. There is also the matter of 'iframes' being taken over by jquery. This will be exhibited when using the 'chat block' and any page with an iframe rendering such as with the 'join', 'preview' and 'member list' pages.

I am excited by this kind of animation technique, looking forward to when the void left by the over-maligned 'Adobe Flash' can be replaced by a cross-browser solution that really works. 

If you would like a tar addon to test, you can send me a PM, or I will attach it here later if there is sufficient interest. Meanwhile, you can see a live demo HERE.

NOTE: This is best viewed with FireFox , and  (I never thought I would say this)  Internet Explorer is also pretty smooth. Give it a couple of refresh at the beginning to get all the cache working.

Looking forward to read your comments.:)

Jean


Last edit: by Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92391
Avatar

Community saint

That certainly looks pretty cool. Nice job Jean!
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92397
Avatar

Community saint

Very nice, Jean!  :thumbs:

My observations while scrolling the front page using Opera, Firefox, Google Chrome, and Seamonkey (FireFox's older brother) on my Linux box…
  • Google Chrome and Opera scrolled smoothly
  • Firefox and Seamonkey were a little choppy, but still very usable.
  • With each of the four browsers, CPU usage climbed to 35-43% (wow!) while scrolling (compared to 1-2% on a normal website).


It would be interesting to see what others will report and what their system stats are.

My eight-year old system stats:
  • CPU:  AMD Athlon(tm) 64 X2 Dual Core Processor 4200+
  • Speed:  2,200.00 MHz
  • Cores:  2
  • Memory:  2.1 GiB
  • Video:  GeForce 6600

Steve
Back to the top
 
Posted
Rating:
#92398

Non-joined user

this one is my favourite implementation of it

ploreex
Back to the top
 
Posted
Rating:
#92403
Avatar

Community saint

Guest said

this one is my favourite implementation of it

ploreex

This is also a nice one, maby for many people to much in one time. The effect is great.


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92404
Avatar

Community saint

Jean:

I have seen this before by some websites yes. It could be a extra attension to the site.

Nice done!

Harry


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Rating:
#92406
Avatar

Community saint

sholzy said

Very nice, Jean!  

My observations while scrolling the front page using Opera, Firefox, Google Chrome, and Seamonkey (FireFox's older brother) on my Linux box…
    Google Chrome and Opera scrolled smoothly Firefox and Seamonkey were a little choppy, but still very usable. With each of the four browsers, CPU usage climbed to 35-43% (wow!) while scrolling (compared to 1-2% on a normal website).


It would be interesting to see what others will report and what their system stats are.

My eight-year old system stats:
    CPU:  AMD Athlon(tm) 64 X2 Dual Core Processor 4200+ Speed:  2,200.00 MHz Cores:  2 Memory:  2.1 GiB Video:  GeForce 6600


Thanks for your testing and report, Steve!
This is revealing and helpful.

on my i7-quad core 12GB GeForce GTX-570 with Windows7-64bit, every time I open a blank browser, my CPU spikes at 25%. After it has settled, there's not much of a drag and just a quick CPU spike to 14% for this Parallax site. This is identical to all my other ocPortal themes including my main site and its Adobe Edge/java-script spinning planet Earth. 

However, from your report it seems that the browser experience has a lot to do with the Operating System. My browsers react differently than yours under Linux: Chrome and Opera have a white background flash and slight choppiness, not quite as smooth as FireFox and IE.

one interesting fact is that there seem to be no CPU and Memory differences on my provider's server, whether I run a normal ocP site or this jQuery enhanced Parallax.

Your report was much appreciated, thanks!:thumbs:
Jean
Back to the top
 
Posted
Rating:
#92407
Avatar

Community saint

Guest said

this one is my favourite implementation of it

ploreex
Indeed, this is impressive for a picture gallery.:cool:
Back to the top
 
Posted
Rating:
#92408
Avatar

Community saint

Thank you for your comments, Duck and Harry!
:thumbs::)
Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by sholzy)  
Rating:
#92559
Avatar

Community saint

My first Parallax enhanced theme is now available as a theme addon.
You can download it here.

I was able to overcome the initial challenges stated above and now everything seems to work as intended.
My thanks and appreciation to Chris Graham for his guidance during this process.

Enjoy,
Jean 
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92562
Avatar

Community saint

Thanks for this new way theming Jean!!


http://digiflash.nl Photo community  (dutch)
Back to the top
 
Posted
Item has a rating of 5 (Liked by Robbie Goacher)  
Rating:
#92645
Avatar

Community saint

A Parallax Universe

Here is another theme based on jQuery scrolling parallax method.

The illusion of 3D perspective movement as the user shift his mouse over parts the environment got me thinking about creating a deep space panoramic experience. I wanted to perceive ocPortal as a sort of spaceship navigating the vastness of the web universe.

Playing with the BETA_CSS_PROPERTY,border-radius, I was able to get the box design I wanted with Firefox and Internet Explorer, however it fell short with Google Chrome but got me a funky look with Opera:cool:.
Keep in mind that this kind of website is not for mobile devices and tablets. Best result will be on a fast computer with a large monitor.  Look at it in a dim light surrounding at full screen for an amazing experience. Board the starship ocPortal, traverse the universe and go where no one has gone before.:lol:

You can view the Demo Here.

I'll have it in the Theme download section shortly.

Jean
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92649
Avatar

Community saint

Jean said

… I wanted to perceive ocPortal as a sort of spaceship navigating the vastness of the web universe.
Love your imaginative approach …!!

Jean said

… Playing with the BETA_CSS_PROPERTY,border-radius, I was able to get the box design I wanted with Firefox and Internet Explorer, however it fell short with Google Chrome …
Not sure which box element you had problems with, but Chrome will display 'box-radius' for some elements. Here is an exaggerated screencap (opacity 0.9 & box-radius 50px) that shows #main_website #main_website_inner edited in Chrome:
#main_website #main_website_inner {
background-color: rgba(0, 0, 0, 0.9) !important;
width: 980px;
position: relative;
margin: -800px auto 0 auto;
border: 0px solid #424242;
box-shadow: 0 0 50px #5D5D5D;
-o-box-shadow: 0 0 50px #5d5d5d;
-webkit-box-shadow: 0 0 50px #5D5D5D;
-ms-box-shadow: 0 0 50px #5d5d5d;
-moz-box-shadow: 0 0 50px #5d5d5d;

border-radius: 50px;
}



Jean said

… Board the starship ocPortal, traverse the universe and go where no one has gone before.
Yeah, sure!

 :lol:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Item has a rating of 5 (Liked by Jean)  
Rating:
#92652
Avatar

Community saint

Multi-directional Parallax...nice :thumbs:.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by Robbie Goacher)  
Rating:
#92674
Avatar

Community saint

Fletch said


Not sure which box element you had problems with, but Chrome will display 'box-radius' for some elements. Here is an exaggerated screencap (opacity 0.9 & box-radius 50px) that shows #main_website #main_website_inner edited in Chrome:
#main_website #main_website_inner {
background-color: rgba(0, 0, 0, 0.9) !important;
width: 980px;
position: relative;
margin: -800px auto 0 auto;
border: 0px solid #424242;
box-shadow: 0 0 50px #5D5D5D;
-o-box-shadow: 0 0 50px #5d5d5d;
-webkit-box-shadow: 0 0 50px #5D5D5D;
-ms-box-shadow: 0 0 50px #5d5d5d;
-moz-box-shadow: 0 0 50px #5d5d5d;

border-radius: 50px;
}

Oh, so very nice, Fletch!

Thanks for the code, I'll apply it immediately. That's exactly how I envisioned this should be. Sort of like the view-screen on the command deck of the Enterprise. :cool:

Jean :thumbs:  :)  
Back to the top
 
Posted
Rating:
#92677
Avatar

Community saint

Jean said

Sort of like the view-screen on the command deck of the Enterprise. :cool:

 :lol:


Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: