-3

I love the background on the Winter Bash page (found here winterbash2016.stackexchange.com).

How is it done? I noticed that there are some images, but how did they make the images and how are they positioned and spinning?

A great answer would say the software used to make the images and the code used to position them and make them spin. Thanks and Happy Holidays!

13
  • Why the Downvote(s)? Please comment instead, I'm happy to explain anything that doesn't make sense! Dec 30, 2016 at 0:07
  • 4
    Asking why people downvote can be a magnet for more downvotes. I think it is always better to appreciate the feedback that the downvote itself provides. In this case I suspect the downvotes are more likely to be for "does not show any research effort" or "not useful" because what you are asking seems clear.
    – PolyGeo
    Dec 30, 2016 at 0:11
  • @PolyGeo OK. That makes sense. Thanks for your comment! Dec 30, 2016 at 0:12
  • @PolyGeo This seems like a question for Meta, is it not? I haven't asked many things on here, so I might be wrong. Dec 30, 2016 at 0:13
  • 3
    I think it is a question that would be more suited to a chat room (which one I am not sure) because it is about how to do something that you have seen on the Stack Exchange network rather than being about improving the Stack Exchange network. If you get some ideas about how it is done and then get stuck trying to implement something similar then you may be in a position to ask on Stack Overflow about something specific that you have tried and got stuck on.
    – PolyGeo
    Dec 30, 2016 at 0:20
  • @PolyGeo OK. I will try one of those options. Should I delete this question? Dec 30, 2016 at 0:22
  • I usually try to redesign/re-purpose a question rather than delete it. Here you have only received some initial feedback from a couple of users so, if left, a single upvote will easily override that. I always watch closely in the early stages of any question I ask to make sure that it is being received in the way I expected (and want), in case I need to pull the pin and delete it. Once it has an upvoted answer you will no longer have that option.
    – PolyGeo
    Dec 30, 2016 at 0:27
  • 3
    a quick inspection using a browser's developer tools (most cases right click and go to inspect) will show that the images are SVG images using CSS to make the snowflake divs rotate (as the SVG image is set as the background)
    – Memor-X
    Dec 30, 2016 at 0:28
  • 3
    If you could narrow your question down to some specific issues you could ask on Graphic Design, as it is it would be too broad though.
    – Cai
    Dec 30, 2016 at 0:41
  • @Memor-X I saw that too. I was just wanting more specifics. Thanks! Dec 30, 2016 at 0:45
  • @Cai Thanks for your input. If I just asked how they made that background on Graphic Design, do you think that it would be to broad, or otherwise not accepted? Dec 30, 2016 at 0:46
  • 1
    It would certainly be closed as too broad as-is; how to create the images and how to implement it with code should probably be two questions but at the very least you should do some research and explain in your question what you have found and what specific parts you're unsure of.
    – Cai
    Dec 30, 2016 at 0:51
  • @Cai OK. I will look into it and do some exploring! Thank you! Dec 30, 2016 at 0:55

1 Answer 1

6

It appears to be made out of SVG's

Here is the main header: https://cdn-prom.sstatic.net/WinterBash/img/snowglobe_scape_1.svg

Each snowflake is its own SVG. (although there are four snowflakes in the background, one of them is reused):

https://cdn-prom.sstatic.net/WinterBash/img/snowflake_1.svg

https://cdn-prom.sstatic.net/WinterBash/img/snowflake_2.svg

https://cdn-prom.sstatic.net/WinterBash/img/snowflake_3.svg

Even the footer is an SVG

https://cdn-prom.sstatic.net/WinterBash/img/footer.svg

The everything is positioned with CSS and JavaScript

header.top {
    background: url(img/snowglobe_scape_1.svg) no-repeat center top;
    background-size: 2076px;
    height: 460px;
    overflow: hidden;
    min-width: 980px
}

This is the code that makes the flakes rotate: (not sure if "locomation" instead of "locomotion" is a typo tho)

header.top #snow1 {
    display: block;
    position: absolute;
    top: 18px;
    width: 50px;
    height: 50px;
    left: 636px;
    background: url(img/snowflake_1.svg?v=bb0067d2ecb6) no-repeat;
    -webkit-animation: locomotion 14s infinite linear;
    -moz-animation: locomotion 14s infinite linear;
    -o-animation: locomotion 14s infinite linear;
    animation: locomotion 14s infinite linear
}
@-webkit-keyframes locomotion {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@-moz-keyframes locomation {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@-o-keyframes locomotion {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes locomotion {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}
2
  • WOW! Thank you for the detailed answer! Dec 30, 2016 at 1:52
  • 2
    That locomation definitely is a typo, and a bug. Fortunately, the only browsers that it affects appear to be ancient versions of Firefox. Dec 30, 2016 at 11:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .