小编Tho*_*man的帖子

大多数人都希望脚本评估能够正常运行.我不.

我正在尝试将视频作为背景(HTML 5,而不是Flash),因为我无法控制所请求页面上包含的内容(Tumblr - 您可以只为索引页面和永久链接页面提供唯一代码,您可以'有一个主页,旧的帖子页面,然后永久链接页面,等等.

{block:IndexPage}
var productElement = document.getElementById("dreamscene");
if (productElement == null)
{
$("body").append('<img src="http://static.tumblr.com/opbsaiu/mqllkvs1c/overlayyyy.png"
                  style="position: fixed; z-index: -1; top: 0pt; left: 0pt; 
                         width: 100%; height: 100%;"><video id="dreamscene" 
                  style="position: fixed; opacity:0.343; z-index: -2; top: 0pt; 
                         left: 0pt; width: 100%; height: 100%;" 
                  loop autoplay audio="muted">
                  <source type="video/mp4" src="videosource#%#$%^&*/dsgfhjk.mp4"> 
                  </source></video>');
}
{/block:IndexPage}

在放置另一个元素之前,我一直试图让它检查元素.我已经得出结论,代码在一个单独的实例中运行,就像页面中的页面一样.显然这是非常糟糕的,我实际上已经让IE 9为音频添加了回声效果.

在Firebug和IE开发中.工具,视频元素的实例永远不会超过一个,所以上面的代码附加了document.ready事件,我正在使用http://www.infinite-scroll.com/来实现魔术.

有一个dataType参数:

$('#thumbnails').infinitescroll({
    navSelector  : ".next a:last",
    nextSelector : ".next a:last",
    itemSelector : "#thumbnails .thumb",
    bufferPx : 7777,
    dataType : 'html',
    loadingText: …

演示和代码 => https://codesandbox.io/s/73ymn2k911

根据我通过开发工具的观察，它最初知道放置组件的位置，但忘记设置opacity: 1或删除旧组件

我怀疑问题出在 app.js请参阅下面的更新。

import React, { Component } from "react";
import { Route, matchPath } from "react-router-dom";
import TransitionGroup from "react-transition-group/TransitionGroup";
import AnimatedSwitch from "./animated_switch";
import { firstChild } from "../utils/helpers";

import TopBar from "./top_bar";
import Home from "./home";
import Projects from "./projects";
import ProjectItem from "./project_item";
import Missed from "./missed";

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projects: []
        };
    }
    componentDidMount() {
        fetch("https://jsonplaceholder.typicode.com/posts")
            .then(response => …

根据屏幕截图，投射到下面 THREE.PlaneGeometry(250, 380, 1, 1) 上的阴影被切断。

我为启用阴影而采取的步骤

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

..

camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);

..

mainLight = new THREE.DirectionalLight(0xffffff, 0.5);
mainLight.position.set(50, 50, 50);
mainLight.castShadow = true;
mainLight.shadow.mapSize.width = width * window.devicePixelRatio;
mainLight.shadow.mapSize.height = width * window.devicePixelRatio;
mainLight.shadow.camera.near = 1;
mainLight.shadow.camera.far = 1000;
mainLight.shadow.camera.fov = 100;
scene.add(mainLight);

..

plane.receiveShadow = true;

..

model.castShadow = true;
model.receiveShadow = true;

我玩过不同的值，比如阴影相机 FOV 和远平面值......

这是使用 DirectionalLight 的警告吗？与 SpotLight 相比，我的所有模型都需要均匀照明。

我发现了three.js shadow cutoff，但它只是建议改用SpotLight，并没有解释为什么会改变任何东西。

当我使用 …

我已经使用以下 SVG 过滤器代替filter: blur(#px);了一段时间，因为我需要一个模糊覆盖元素边缘到边缘而不是通常的脱落。它在桌面和 Android 上的 Chrome 中都能很好地工作。

另一方面，Safari webkit 有很多问题。我已经尝试删除和调整feColorMatrix，feComposite但结果更糟。

我四处寻找替代品，但我已经完全干了。

<filter id="ultraBlur" width="150%" height="150%" x="-25%" y="-25%" color-interpolation-filters="sRGB">
    <feGaussianBlur stdDeviation="70"></feGaussianBlur>
    <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix>
    <feComposite in2="SourceGraphic" operator="in"></feComposite>
</filter>

由 chrome 渲染

由 safari webkit 呈现

    $.ajax({
    url: "http://api.flickr.com/services/rest/?method=flickr.photos.getSizes&format=json&api_key=708f179518b2093d23f0aef284b565a4&photo_id=6115633659&jsoncallback=?",
    type: "GET",
    cache: true,
    dataType:'jsonp',
    success: function (data) {           

    var largeSRC = data.sizes.size.Original;

    alert(largeSRC);

    }
});

所以,是的,基本上,我不知道如何...我甚至不知道如何称呼它.我想获取原始大小的URL. http://www.flickr.com/services/api/explore/flickr.photos.getSizes

jsonFlickrApi({ "sizes": { "canblog": 0, "canprint": 0, "candownload": 1, 
"size": [
  { "label": "Square", "width": 75, "height": 75, "source": "http:\/\/farm7.static.flickr.com\/6068\/6115633659_500f8bbd74_s.jpg", "url": "http:\/\/www.flickr.com\/photos\/b34u_h4r13y_n47h4n_7h0m45\/6115633659\/sizes\/sq\/", "media": "photo" },
  { "label": "Thumbnail", "width": 100, "height": 66, "source": "http:\/\/farm7.static.flickr.com\/6068\/6115633659_500f8bbd74_t.jpg", "url": "http:\/\/www.flickr.com\/photos\/b34u_h4r13y_n47h4n_7h0m45\/6115633659\/sizes\/t\/", "media": "photo" },
  { "label": "Small", "width": "240", "height": "159", "source": "http:\/\/farm7.static.flickr.com\/6068\/6115633659_500f8bbd74_m.jpg", "url": "http:\/\/www.flickr.com\/photos\/b34u_h4r13y_n47h4n_7h0m45\/6115633659\/sizes\/s\/", "media": "photo" },
  { "label": "Medium", "width": "500", "height": …