标签: parallax

我需要在我为客户构建的网站中使用jquery parallax,我主要是一个后端开发人员,所以我正在学习更多关于前端和jquery等的内容.我遇到了一些例子,例如http:// www. nikebetterworld.com/和教程然而我担心版权问题,所以我想知道是否有人为初学者发现了一个可靠而简单的教程来创建视差效果？谢谢

我在过去创建了一些网站,其中scrolldeck.js具有标准的全屏幕背景,其中有一层ontop和文本(标准滚动视差风格),这不是我想要的.

我正在寻找一个脚本或教程(或示例),以便在滚动时在前景中设置单个div标签(图像)动画/移动.我将在一个页面的垂直滚动网站上使用它,所以当您滚动我希望奇怪的图像以不同的速度滚动并具有开始和停止位置.我不想要视差的整个背景.

提前感谢一堆

编辑:这是我正在寻找的更好的解释:

图片向下滚动页面,滚动时你看到一个漂浮的瓶子(透明png),你继续向下滚动阅读内容,并且在某个点上,当你继续滚动它时,瓶子会很好地放在桌子上(背景的一部分)不再动了.

很好的目标是让元素(图像)移动到预定位置(基于滚动),然后在它们到达最终静止位置时保持放置.

编辑2:这里有一些示例网站:
http: //jessandruss.us/ - 这个网站完全符合我想要的关于此时的2/3:查看截图
http://smokeybones.com/ - 汉堡很好,我想要的效果,最小但它滚动时移动到位.

我已经看到很多解决方案用于parallaxing分层div或带有背景图像的部分...我希望有人有一个现有插件的解决方案或知识,用于parallaxing具有多个CSS背景的div /部分,例如:

background: url(foo.png), url(foo2.png), url(foo3.png);
background-position: x x, x x, x x;

我是Android世界的新手.我想在我的应用程序中添加一些视差背景效果.

我该怎么做？如何在Android中实现这一目标？

是否有任何有效的方法来创建2-3层视差背景？Android API中是否有一些工具或类？

或者我可能需要在代码中"手动"修改背景图像位置或边距？

我正在使用API​​级别19.

我试图了解Paralloid库,但这个太大了,无法解释.我是Android和Java的新手,我不熟悉所有Layouts和其他UI对象,但我熟悉MVC.

我开始赏金,也许有人可以一步一步解释这个图书馆是如何运作的.

我正在尝试使用Parallax并获得一些奇怪的错误,想知道是否有人可以添加一些输入.我见过的唯一一个有效实现视差的应用程序是soundcloud.它非常微妙,但每个项目都有一个图像背景,滚动时它具有视差效果.

我已经创建了一个自定义的RecyclerView来处理这个问题,这是我到目前为止所做的:

public class ParallaxScrollListener extends RecyclerView.OnScrollListener {

private float scrollSpeed = 0.5f;

@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();

    int firstVisible = layoutManager.findFirstVisibleItemPosition();
    int visibleCount = Math.abs(firstVisible - layoutManager.findLastVisibleItemPosition());

    Matrix imageMatrix;
    float tempSpeed = -100;

    if (dy > 0) {
        tempSpeed = scrollSpeed;
    } else if (dy < 0) {
        tempSpeed = -scrollSpeed;
    }

    for (int i = firstVisible; i < (firstVisible + visibleCount); i++) {
        ImageView imageView …

我确信这是在过去提出来的; 但是我不知所措.

在这个方形网页上,用户滚动标题为"At Square,不同学科协作设计精美简单的解决方案"的部分,并在页面上的特定点激活动画.当用户向后滚动时,图像会恢复,依此类推.他们如何实现这一目标？

2013年8月:自从我提出这个问题以来已经有九个月了,视差滚动就已经开始了.我正在附上几个链接,以便进一步阅读这个主题,从如何实现它到为什么要避免它.

视差滚动的示例:

• http://en.wikipedia.org/wiki/Parallax_scrolling
• http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
• http://www.cloudberrycreative.com/blog/6-sites-that-get-parallax-scrolling-right/

教程:

• http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
• http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
• http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
• http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

思考:

• http://curveagency.com/blog/parallax-scrolling-good-bad-and-questionable
• http://teamhardison.com/wordpress-for-real-estate/parallax-scrolling-really-do-have/
• http://www.monolithdoes.com/parallax-scrolling-why-or-why-not/
• http://www.quora.com/search?q=parallax+scrolling

有一种网页设计趋势,我在我遇到的网站上看到的越来越多.问题是,我不知道它被正式称为什么,所以我不知道如何在网页设计网站或博客中寻找这个主题.我想找到有关提示和最佳实践的教程和文章,但我没有发现任何内容,也不知道人们称之为这种设计风格.

基本上,它有一个很长的首页(或内页),有很多水平部分,有大图像和文字.它有点像单页网站,但它不是一页的.它有点像Parallax,但它并没有真正使用视差效果(至少不一定).它还与响应式设计紧密相关,因为它共享了大量滚动所需的长垂直格式.

我所指的几个例子:www.marketo.com,www.ginzametrics.com,www.kinhr.com

如果有任何,或任何相关的文章或资源,我会感谢任何帮助找到这个的正式名称.谢谢!

首先,这里是我网站的链接,有我要描述的问题:

http://themes.roussounelosweb.gr/cassiopeia/

在Firefox,IE 9,Opera,Safari,iOS中,该网站看起来很完美,并且运行顺畅.问题在于Chrome和Android设备,其中滚动非常滞后,并且使用视差效果的背景图像以笨重的方式制作动画.

我怀疑问题在于背景大小:封面和背景附件:我的图像的固定属性,但我还没有找到解决这个问题的方法.

您可以直接看到它,并在上面的链接上获得更好的主意.请帮忙; 我正在完成这个项目的最后一步,这个错误实际上阻碍了我.

section{

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment:fixed;
overflow:hidden;
}

section.section1{

background-image:url(../img/section1.jpg);
background-repeat:no-repeat;
color:#dedede;
text-shadow:1px 1px 5px rgba(0,0,0,0.8);
position:relative;
padding:20px 0px;
z-index:1;
overflow:hidden;
}

我目前正在努力解决以下问题:

我在Objective-C中创建了一个Sprite Kit游戏,我必须在所有3个场景中使用视差动画.我使用随机生成的X和Y位置的云.它们出现在问候场景,游戏场景和高分场景中.

问题:每当我从一个场景切换到另一个场景时,我都必须重新启动视差动画,这会导致混乱的中断.

无论您在游戏场景之间切换多少次,在后台始终保持"云场景"一直运行的最佳策略是什么？

提前致谢.

我创建了当前在UltraVisualiOS应用程序中可用的相同组件,用于查看动画中的记录,如parallax效果.有关详细信息,请参阅以下附加的GIF图像.我想要与给定视频网址相同的动画.

为此,我发现两个GitHub URL几乎相同,但它不符合UltraVisualiOS应用程序中使用的相同动画.有关更多信息,请查找以下两个网址.

网址:https
://github.com/fdzsergio/SFFocusViewLayout/tree/2.0.0网址:https://github.com/RobotsAndPencils/RPSlidingMenu

问题:
现在我正面临着如何缩小聚焦图像的问题,考虑到底部保持静止.第一个聚焦图像应从顶部缩小(底部保持静止),同时考虑到保持静止的第二个图像的顶部,下一个图像将聚焦.

现行代码:

- (void)prepareLayout {

NSMutableArray *cache = [NSMutableArray array];

NSInteger numberOfItems = [self.collectionView numberOfItemsInSection:0];

// last rect will be used to calculate frames past the first one.  We initialize it to a non junk 0 value
CGRect frame = CGRectZero;
CGFloat y = 0;
CGFloat footerTop = 0;

for (NSUInteger item = 0; item < numberOfItems; item++) {
    NSIndexPath *indexPath = …