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