Suljettu

Create Smooth Javascript Mouse Scroll Controlled dynamic element positioning

Need to start ASAP.

This is an existing portfolio website landing page.

The landing page currently displays a Featured Work Section/Frame, Work Listing/Frame, Services/Frame, Blog Listing/Frame and a footer.

Each frame will be 100% width and 100% height of the viewport. Content inside of these frames is irrelevant but needs to be able to be styled relative to the frame with bootstrap. The landing page will have all frames stacked vertically on a long tall scrollable page. Then on pageload, if the screen size is optimal, we want to create a tall empty element (to keep the scroll bar the exact same size) and turn all of the frames to a hidden fixed position and scroll them in one by one based on the current scroll bar position. When each frame hits the top it needs to snap in place and stay. If scrolling continues, the new frame comes in over the top of the under frame with the under frame moving. Creating a page over page effect.

We want to be able to resize the browser and at adapt to 3 different optimal viewport sizes. If its smaller then 1st size it will fallback to 1 long page scrolling normally.

We would like to use css3 as much as possible for animation but if that wont work we are ok without it.

I added a more descriptive image of the process.

Also here is a list of possible methods that would need tobe created to achieve this. These methods are only for reference and can be changed to whatever makes it work for you. Plus I didn't go into complete detail so there may be extra methods that need to be created.

Methods
init
setOnResize
setBrowserDimensions
setFrameSizeBasedOnViewport

setOnScroll
removeOnScroll

checkBrowserDimensions

setFrameSizeBasedOnViewport
IF less 768x480 go back to normal stacking mode
changeToNormalModeWithAnimation
ELSE IF more then set frame mode
setNewFrameSize (this will determine where the scrollbar should be.)
changeToFrameModeWithAnimation

changeToNormalModeWithAnimation
smooth animation when changing modes not to confuse the user

changeToFrameModeWithAnimation
Create Blank Element matching height and width of all Frames added together.
// set css for frames that are off screen, top 100% , position fixed
// set current frame scrolling based on position of scrollbar
// if at top snap first frame
setFrameScrolling

setFrameScrolling
removeFrameScrolling

onScroll javascript event
setFrameSnapped
removeFrameSnapped

Maybe using this plugin

http://johnpolacek.github.com/superscrollorama/

Taidot: CSS

Näytä lisää: website smooth mouse scroll javascript, dynamic mouse scroll page, smooth on, size of landing page, portfolio bootstrap, create website javascript, blog with bootstrap, javascript mouse scroll smooth, dynamic services, smooth, smooth and, positioning, landing page javascript, javascript animation, animation javascript, dynamic website bootstrap, create effect, javascript scroll page, css3 mouse animation, effect landing page, effect javascript, need dynamic website animation, page element, bootstrap landing, page scroll bootstrap

About the Employer:
( 20 reviews ) Los Angeles, United States

Projektin tunnus: #4284708

9 freelanceria on tarjonnut keskimäärin 16 $/tunti tähän työhön

SoftDevelopINC

Hello, May I help you to do this project? Please check pm for more [url removed, login to view]

$15 USD / tunti
(28 arvostelua)
4.6
phenodesign

Ready to help

$15 USD / tunti
(15 arvostelua)
4.6
techwelfare

Hi we checked your requirement,We could develop as per your need. u could check that out. we would work till your satisfaction. Thanks & Regards Techwelfare Please check inbox for our previous work.

$15 USD / tunti
(41 arvostelua)
4.4
kultech

I can done. Please check PM and my review. Thank You

$15 USD / tunti
(37 arvostelua)
3.8
neoconcepts

php/mysql/javascript team

$15 USD / tunti
(103 arvostelua)
3.8
Voyageinfo

Dear sir, Designing work : [url removed, login to view] [url removed, login to view] [url removed, login to view] [url removed, login to view] [url removed, login to view] [url removed, login to view] Lisää

$15 USD / tunti
(12 arvostelua)
3.6
vivaciouswebsol

Hello We have gone through your requirement and interested working with this same. we have checked your wire frame. but need to clear some points. can we talk online? thank

$20 USD / tunti
(1 arvostelu)
0.0
phpecho

please check pm. Thanks.

$15 USD / tunti
(1 arvostelu)
0.0
bistanil98

Ready to start this [url removed, login to view] my portfolio in PM.

$15 USD / tunti
(9 arvostelua)
0.0
otssolutions01

Hi, We are a 10 year old professional IT software company. We would like to work on this project. Please find more details in your PMB. Thanks.

$15 USD / tunti
(0 arvostelua)
0.0
qualifiedcoders

Hi We are interested in your project and read your [url removed, login to view] have completed 150+ big projects in last 5 years. Please check private message board for details.

$15 USD / tunti
(22 arvostelua)
0.0