Gå til innhold

[Løst] Repeat et bilde, og få det til å spinne!

Occi

Av Occi
i Programmering og webutvikling

Anbefalte innlegg

Occi

Occi

Skrevet
Skrevet (endret)

Hei,

Jeg ønsker å fylle en nettside med et bilde og få det tiled/repeated, f. eks med background-repeat: repeat; og deretter få dette bildet til å spinne, enten med CSS eller Javascript.

Har klart å få det til med et bilde ved bruk av img, men ønsker at det samme bildet skal bli repeat tiled.
 

<!DOCTYPE html>
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<img src="bilde.png">
</body>
</html>

@-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}

img {
-webkit-animation-name: rotate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}

 

Endret av Occi
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Occi

Occi

Skrevet
  • Forfatter
Skrevet (endret)

Postet en tråd på Stack Overflow også, som har fått et par svar og kommentarer. Er ingen som automatisk fyller screen area i browser med bildet repeated ennå though.

 

Kanskje transition kan være verdt å ta en titt på?

Nja, ikke helt. Ta en titt på jsFiddle fra en av svarene på SO. Det er akkurat hva jeg vil, men ser helst at den fyller nettsiden, og at ikke antall er hardkodet. Sikkert enkelt i javascript, men jeg er latterlig rusten på js og søker en elegant løsning.

Endret av Occi
Lenke til kommentar
Feh

Feh

Skrevet
Skrevet (endret)

En mulighet er å detektere vindustørrelsen det blir vist på. F.eks kan du legge til følgende (bruker jquery for å finne window height). tiles_to_fill_screen er høyde x bredde delt på dimensjonene til bildet som gir antallet bilder som det er plass til i området. Det er mulig du må tweake det litt, f.eks legge til "+2" på slutten av regnestykket, tilfelle utregningen tilsier at det blir et bilde for lite.

 

var width = 960;
var height = $(window).height();
var tiles_to_fill_screen = ((height * width) / (240 * 240));

 

For å fylle hele nettleservinduet, alternativt med et par "ekstra":

 

var width = $(window).width();
var height = $(window).height();
var tiles_to_fill_screen = ((height * width) / (240 * 240)) +2;

Endret av Feh
Lenke til kommentar
Occi

Occi

Skrevet
  • Forfatter
Skrevet

Takker for flere svar. Det har kommet en løsning på Stack Overflow, men koden er ikke helt pen. Den tvinger atm. størrelse pga. document.getWidth ikke fungerte fint med (min) Firefox.

 

En mulighet er å detektere vindustørrelsen det blir vist på. F.eks kan du legge til følgende (bruker jquery for å finne window height). tiles_to_fill_screen er høyde x bredde delt på dimensjonene til bildet som gir antallet bilder som det er plass til i området. Det er mulig du må tweake det litt, f.eks legge til "+2" på slutten av regnestykket, tilfelle utregningen tilsier at det blir et bilde for lite.

Dette kan løse problemet, kan se om jeg får til noe. Takk.

 

Hva med noe sånt noe?

 

http://jsfiddle.net/UGt2k/1/

 

Krever dog jQuery, men er vell kanskje ikke noe problem?

Kankje noe ryddigere kode, men virker å fungere på samme prinsipp som løsningsforslaget på Stack Overflow, ved at antallet er hardkodet. Optimalt sett burde vel dette blitt regnet ut, men fin kode er ikke så viktig for denne tullesiden :p

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...