001package gwt.material.design.client.ui;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 GwtMaterialDesign
008 * %%
009 * Licensed under the Apache License, Version 2.0 (the "License");
010 * you may not use this file except in compliance with the License.
011 * You may obtain a copy of the License at
012 * 
013 *      http://www.apache.org/licenses/LICENSE-2.0
014 * 
015 * Unless required by applicable law or agreed to in writing, software
016 * distributed under the License is distributed on an "AS IS" BASIS,
017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
018 * See the License for the specific language governing permissions and
019 * limitations under the License.
020 * #L%
021 */
022
023import gwt.material.design.client.base.MaterialWidget;
024import gwt.material.design.client.ui.html.Div;
025
026import com.google.gwt.dom.client.Document;
027import com.google.gwt.user.client.ui.Widget;
028
029//@formatter:off
030/**
031* Mateiral Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.
032*
033* <h3>UiBinder Usage:</h3>
034* <pre>
035* {@code
036* 
037*<m:MaterialParallax>
038*     <m:MaterialImage url="http://i.imgur.com/CiPPh6h.jpg" />
039*</m:MaterialParallax>
040*
041*<m:MaterialTitle title="Sample" description="SADASD ASD DAS "/>
042*
043*<m:MaterialParallax>
044*    <m:MaterialImage url="http://i.imgur.com/CiPPh6h.jpg" />
045*</m:MaterialParallax>
046*
047*<m:MaterialTitle title="Sample" description="SADASD ASD DAS "/>
048*
049*<m:MaterialParallax>
050*    <m:MaterialImage url="http://i.imgur.com/CiPPh6h.jpg" />
051*</m:MaterialParallax>
052*
053*<m:MaterialTitle title="Sample" description="SADASD ASD DAS "/>
054* }
055*<pre>
056* @author kevzlou7979
057* @author Ben Dol
058* @see <a href="http://gwt-material-demo.herokuapp.com/#showcase">Material Parallax</a>
059*/
060//@formatter:on
061public class MaterialParallax extends MaterialWidget {
062
063    private Div div = new Div();
064
065    public MaterialParallax() {
066        super(Document.get().createDivElement(), "parallax-container");
067        super.add(div);
068        div.setStyleName("parallax");
069    }
070
071    @Override
072    public void add(Widget child) {
073        div.add(child);
074    }
075
076    @Override
077    protected void onLoad() {
078        super.onLoad();
079        initParallax();
080    }
081
082    public native void initParallax()/*-{
083        $wnd.jQuery(document).ready(function() {
084          $wnd.jQuery('.parallax').parallax();
085        });
086    }-*/;
087}